Tooltips Content

Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

BottomTopLeftRight

Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.

<!-- data-position can be : bottom, top, left, or right -->
  <!-- data-tooltip defines the tooltip text -->
  <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>

Initialization

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.tooltipped').tooltip();
  });

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.Tooltip.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.

$('.tooltip').tooltip('methodName');
$('.tooltip').tooltip('methodName', paramName);
*/

.open();

Show tooltip.

instance.open();

.close();

Hide tooltip.

instance.close();

.destroy();

Destroy plugin instance and teardown

instance.destroy();

Properties