工具提示
Tooltip 一般用来为图标添加说明,它的内容一般是纯文本,不含图片和格式化的文本。
调用方式
- 通过自定义属性调用
- 通过 JavaScript 调用
相关资料
调用方式
通过自定义属性调用
通过该方式无需编写 JavaScript 代码。只需在元素上添加 mdui-tooltip="options" 属性即可激活该插件。
通过 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:实例 |