Materialize feature discovery provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.
Open DemoFollow the following steps to create Materialize CSS FeatureDiscovery.
Step:1 - Create Materialize CSS 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.
<ul class="container">
<li class="collection-item">Collection Item</li>
</ul>
Step:2 - Initialize the tap target through Javascript or jQuery.
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();
});
<!-- 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>
<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>