工具提示

2018-05-26 03:08 更新

Tooltip 一般用來為圖標(biāo)添加說明，它的內(nèi)容一般是純文本，不含圖片和格式化的文本。

調(diào)用方式

  • 通過自定義屬性調(diào)用
  • 通過 JavaScript 調(diào)用


相關(guān)資料

Material Design 工具提示設(shè)計(jì)規(guī)范


調(diào)用方式

通過自定義屬性調(diào)用

通過該方式無需編寫 JavaScript 代碼。只需在元素上添加 mdui-tooltip="options" 屬性即可激活該插件。

www.mdui.org - 工具提示 - 通過自定義屬性調(diào)用

在線運(yùn)行


通過 JavaScript 調(diào)用

實(shí)例化組件：

// selector 為 CSS 選擇器或 DOM 元素
// options 為配置參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Tooltip(selector, options);

在線運(yùn)行


參數(shù)

 參數(shù)名 類型 默認(rèn)值 描述
 position string auto Tooltip 的位置。取值范圍包括 auto、bottom、top、left、right。
為 auto 時(shí)，會(huì)自動(dòng)判斷位置。默認(rèn)在下方。優(yōu)先級為 bottom > top > left > right
 delay int 0 延時(shí)觸發(fā)，單位毫秒。
 content string  Tooltip 的內(nèi)容。


方法

 方法名 描述
 open() 打開 Tooltip
 close() 關(guān)閉 Tooltip
 toggle() 切換 Tooltip 的狀態(tài)
 getState() 返回 Tooltip 的狀態(tài)。共包含四種狀態(tài)（opening、opened、closing、closed）。


事件

 事件 描述 參數(shù)
 open.mdui.tooltip 打開動(dòng)畫開始時(shí)，事件被觸發(fā)。 event.detail.inst：實(shí)例
 opened.mdui.tooltip 打開動(dòng)畫結(jié)束時(shí)，事件被觸發(fā)。 event.detail.inst：實(shí)例
 close.mdui.tooltip 關(guān)閉動(dòng)畫開始時(shí)，事件被觸發(fā)。 event.detail.inst：實(shí)例
 closed.mdui.tooltip 關(guān)閉動(dòng)畫結(jié)束時(shí)，事件被觸發(fā)。 event.detail.inst：實(shí)例





以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)