Materialize Feature Discovery

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

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS