Materialize CSS Feature Discovery

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

Example

Open Demo

Follow the following steps to create a Materialize 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

     
      <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

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS