Tooltips

Materialize is a modern responsive CSS framework based on Material Design by Google.

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.

Bottom
This is a tooltip with a link and a insert_chart
Top Left Right

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.