Materialize Feature Discovery

Materialize feature discovery provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

Open Demo

Follow the following steps to create Materialize CSS FeatureDiscovery.

Step:1 - Create Materialize CSS feature discovery showed element.

Feature Discovery Showed Element
      	         
    <a id="menu" class="waves-effect waves-light btn btn-floating"><i class="material-icons">menu</i></a>

Step:2 - Create tap target structure.

Tap Target Structure
      	         
	<ul class="container">
	  <li class="collection-item">Collection Item</li>
	</ul>

Step:2 - Initialize the tap target through Javascript or jQuery.

Initialization
      	         	
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tap-target');
    var instances = M.TapTarget.init(elems, options);
  });
 // Or with jQuery
  $(document).ready(function(){
    $('.tap-target').tapTarget();
  });
   
  

General Syntax

<!-- Element Showed -->
  <a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
  <!-- Tap Target Structure -->
  <div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
    </div>
  </div>

Try It Now

Source Code

Download

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a id="menu" class="btn btn-floating btn-large cyan">
    <i class="material-icons">menu</i>
  </a>
</div>

<div class="tap-target cyan" data-target="menu">
  <div class="tap-target-content white-text">
    <h5>I am here</h5>
    <p class="white-text">Provide value and encourage return visits by introducing users to new features and functionality at contextually
      relevant moments.</p>
  </div>
</div>

Try it yourself

Materialize Feature Discovery

Feature Discovery Showed Element

Tap Target Structure

Initialization

General Syntax

Source Code

Web Tutorials