工具提示
2018-05-26 03:08 更新
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：实例 |
以上内容是否对您有帮助：
← 纸片
更多建议：