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.

You can also add the blur-bg class to the .tooltipped element to add blur background or blur-bg acrylic if you want the acrylic effect.

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>
  <!-- add blur-bg class to add blurred background -->
  <a class="btn tooltipped blur-bg" 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, {
      // specify options here
    });
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.tooltipped').tooltip({
      // specify options here
    });
  });
        

Options

Name	Type	Default	Description
exitDelay	Number	200	Delay time before tooltip disappears.
enterDelay	Number	0	Delay time before tooltip appears.
text	String		Text string for the tooltip.
unsafeHTML	String	null	HTML content that will be appended to to text. Only use properly sanitized or otherwise trusted data for unsafeHTML.
html	String	null	(DEPRECATED): will be removed in a later release. HTML content that will be appended to text. Only use properly sanitized or otherwise trusted data for html. Will be ignored if unsafeHTML is set.
margin	Number	5	Set distance tooltip appears away from its activator excluding transitionMovement.
inDuration	Number	300	Enter transition duration.
opacity	Number	1	Opacity of the tooltip.
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.