Tooltip 一般用来为图标添加说明,它的内容一般是纯文本,不含图片和格式化的文本。
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印', position: 'top'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印', delay: 1000}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
实例化组件:
// 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 )。 |