menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

工具提示

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

调用方式

  1. 通过自定义属性调用
  2. 通过 JavaScript 调用

调用方式

通过自定义属性调用

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

Example
<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>

通过 JavaScript 调用

实例化组件:

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

参数

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

方法

方法名描述
open()

打开 Tooltip

允许传入配置参数,以便每次打开时能修改内容,例如 open({ content: 'new content' })。配置参数见上方的参数列表。

close()关闭 Tooltip
toggle()切换 Tooltip 的状态
getState() 返回 Tooltip 的状态。共包含四种状态(openingopenedclosingclosed)。

事件

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