阅读(4832) (18)

工具提示

2017-05-26 01:58:07 更新

Tooltip 一般用来为图标添加说明,它的内容一般是纯文本,不含图片和格式化的文本。

调用方式

  • 通过自定义属性调用
  • 通过 JavaScript 调用


相关资料

Material Design 工具提示设计规范


调用方式

通过自定义属性调用

通过该方式无需编写 JavaScript 代码。只需在元素上添加 mdui-tooltip="options" 属性即可激活该插件。

www.mdui.org - 工具提示 - 通过自定义属性调用

在线运行


通过 JavaScript 调用

实例化组件:

// selector 为 CSS 选择器或 DOM 元素
// options 为配置参数,见下面的参数列表
var inst = new mdui.Tooltip(selector, options);

在线运行


参数

 参数名 类型 默认值 描述
 position string auto Tooltip 的位置。取值范围包括 auto、bottom、top、left、right。
为 auto 时,会自动判断位置。默认在下方。优先级为 bottom > top > left > right
 delay int 0 延时触发,单位毫秒。
 content string  Tooltip 的内容。


方法

 方法名 描述
 open() 打开 Tooltip
 close() 关闭 Tooltip
 toggle() 切换 Tooltip 的状态
 getState() 返回 Tooltip 的状态。共包含四种状态(opening、opened、closing、closed)。


事件

 事件 描述 参数
 open.mdui.tooltip 打开动画开始时,事件被触发。 event.detail.inst:实例
 opened.mdui.tooltip 打开动画结束时,事件被触发。 event.detail.inst:实例
 close.mdui.tooltip 关闭动画开始时,事件被触发。 event.detail.inst:实例
 closed.mdui.tooltip 关闭动画结束时,事件被触发。 event.detail.inst:实例