codecamp

工具提示

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

调用方式

  • 通过自定义属性调用
  • 通过 JavaScript 调用


相关资料

Material Design 工具提示设计规范


调用方式

通过自定义属性调用

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

www.mdui.org - 工具提示 - 通过自定义属性调用

在线运行


通过 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:实例





纸片
Snackbar
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }