Tooltips

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>

        

Also HTML-Elements can be added with the attribute data-tooltip-id="tooltip-content"

            
  <a href="#" class="btn tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content">
    Bottom
  </a>
  <div id="tooltip-content" style="display: none;">
    This is a tooltip with a
    <a href="https://github.com/materializecss">link</a> and a
    <i class="material-icons icon-demo">insert_chart</i>
  </div>

        

Initialization

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems, {
      // 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

All the methods are called on the plugin instance. You can get the plugin instance like this:

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

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