閱讀(2.6k) 書(shū)簽贊(0) 我要糾錯(cuò)

工具提示

2018-05-26 03:08 更新

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

調(diào)用方式

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

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

實(shí)例化組件：

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

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

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

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