工具提示是针对图形元素的小型、交互式、文本提示。当使用图标进行操作时，可以使用工具提示来阐明其功能。

将 Tooltipped 类添加到元素中，并在 data-tooltip 中添加顶部、底部、左侧、右侧以控制位置。

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

初始化

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

  // Or with jQuery

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

选项

名称	类型	默认值	说明
exitDelay	数字	0	工具提示消失前的延迟时间。
enterDelay	数字	200	工具提示出现前的延迟时间。
html	字符串	null	可以采用常规文本或 HTML 字符串。
margin	数字	5	设置工具提示远离其激活器的距离，不包括 transitionMovement。
inDuration	数字	300	进入过渡持续时间。
outDuration	数字	250	退出过渡持续时间。
position	字符串	'bottom'	设置工具提示的方向。'top'、'right'、'bottom'、'left'。
transitionMovement	数字	10	工具提示在过渡期间移动的像素数。

方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。你可以像这样获取插件实例

  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();

显示工具提示。

instance.open();
        

.close();

隐藏工具提示。

instance.close();
        

.destroy();

销毁插件实例并拆除

instance.destroy();
        

属性

名称	类型	说明
el	元素	用于初始化插件的 DOM 元素。
options	对象	实例初始化时使用的选项。
isOpen	布尔值	如果工具提示已打开。
isHovered	布尔值	如果工具提示已悬停。