工具提示 - Materialize

工具提示是主要用于图形元素的小型交互式文本提示。使用图标执行操作时，您可以使用工具提示向人们说明其功能。

将带工具提示的类添加到元素中，并在data-tooltip上添加top、bottom、left和right以控制位置。


  <!-- data-position可以是 : bottom, top, left, or right -->
  <!-- data-tooltip 定义提示文本 -->
  <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">悬浮显示</a>


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

  // 或用JQuery

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

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

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：


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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.tooltip').tooltip('methodName');
    $('.tooltip').tooltip('methodName', paramName);
  */

.open();

显示工具提示


instance.open();

.close();

隐藏工具提示


instance.close();

.destroy();

销毁插件实例并回收


instance.destroy();

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
isOpen	Boolean	工具提示是否显示
isHovered	Boolean	工具提示是否悬停

介绍
初始化
选项
方法
属性

初始化

选项

方法

.open();

.close();

.destroy();

属性