工具提示

调用方式

通过自定义属性调用

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

Example

<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印'}"><i class="mdui-icon material-icons">&#xe555;</i></button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印', position: 'top'}"><i class="mdui-icon material-icons">&#xe555;</i></button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印', delay: 1000}"><i class="mdui-icon material-icons">&#xe555;</i></button>

通过 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`	打开动画结束时，事件被触发。
`close.mdui.tooltip`	关闭动画开始时，事件被触发。
`closed.mdui.tooltip`	关闭动画结束时，事件被触发。

调用方式

相关阅读

调用方式

通过自定义属性调用

通过 JavaScript 调用

参数

方法

事件