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.

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

Name	Type	Default	Description
exitDelay	Number	0	Delay time before tooltip disappears.
enterDelay	Number	200	Delay time before tooltip appears.
html	String	null	Can take regular text or HTML strings.
margin	Number	5	Set distance tooltip appears away from its activator excluding transitionMovement.
inDuration	Number	300	Enter transition duration.
outDuration	Number	250	Exit transition duration.
position	String	'bottom'	Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'.
transitionMovement	Number	10	Amount in px that the tooltip moves during its transition.

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:

  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

Name	Type	Description
el	Element	The DOM element the plugin was initialized with.
options	Object	The options the instance was initialized with.
isOpen	Boolean	If tooltip is open.
isHovered	Boolean	If tooltip is hovered.