FeatureDiscovery Content

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

Feature discovery prompts have more impact when they are presented to the right users at contextually relevant moments. When presented to the wrong user at the wrong time, they can be intrusive and annoying.

Open tap targetClose tap target

menu

I am here

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

<!-- 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>

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();
  });

Options

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

Copy

var instance = M.TapTarget.getInstance(elem);

/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.

$('.tap-target').tapTarget('methodName');
$('.tap-target').tapTarget('methodName', paramName);
*/

.open();

Open Tap Target

instance.next();
  instance.next(3); // Move next n times.

.close();

Close Tap Target

instance.close();

.destroy();

Destroy plugin instance and teardown

instance.destroy();

Properties