Foundation - Tooltip JavaScript 參考

描述

Foundation 提供瞭如下所示的 tooltip 的 JavaScript 元件。

要使用此外掛，應在您的 JavaScript 中包含 foundation.core.js 和 foundation.tooltip.js 檔案。此外掛需要以下實用程式庫：

它建立一個新的 tooltip 例項。

var elem = new Foundation.Tooltip(element);

它觸發 Tooltip#event:init 事件並接受以下引數。

序號	名稱和描述	型別
1	element 它是用於將 tooltip 附加到的 jQuery 物件。	jQuery
2	options 要擴充套件預設配置，使用此物件。	物件

序號

名稱和描述

型別

element

它是用於將 tooltip 附加到的 jQuery 物件。

jQuery

options

要擴充套件預設配置，使用此物件。

物件

您可以使用這些選項來自定義 tooltip 例項。可以將其設定為單獨的資料屬性、一個合併的 data-options 屬性或作為傳遞給外掛建構函式的物件。下表列出了 Foundation 中使用的外掛選項。

序號	名稱和描述	示例
1	hoverDelay 它表示以毫秒為單位的時間，在懸停時 tooltip 必須開啟之前需要等待的時間。	200
2	fadeInDuration150 它表示淡入檢視所需的時間。	150
3	fadeOutDuration 它表示淡出檢視所需的時間。	150
4	disableHover 設定為 true 時，它將停用懸停事件開啟 tooltip。	false
5	templateClasses 要應用於 tooltip 模板的其他類，可選。	'my-cool-tip-class'
6	tooltipClass 新增到 tooltip 模板的非可選類。	'tooltip'
7	triggerClass 應用於 tooltip 的錨元素的類。	'has-tip'
8	showOn 開啟 tooltip 的斷點最小尺寸。	'small'
9	template 用於建立 tooltip 標記的自定義模板。	''
10	tipText 開啟時在 tooltip 模板中輸出的文字。	'Some cool space fact here.'
11	clickOpen 透過單擊或觸控事件觸發時，它將開啟 tooltip。	true
12	positionClass 用於定位的其他類，由 JS 設定。	'top'
13	vOffset 它表示模板在 Y 軸上必須從錨點推出的距離（畫素）。	10
14	hOffset 當與旁邊對齊時，它表示模板在 X 軸上必須從錨點推出的距離（畫素）。	12

這些事件將從附加了 tooltip 外掛的任何元素觸發。下表列出了這些事件以及簡要說明。

序號	名稱和描述
1	tooltip.zf.tooltips 觸發關閉頁面上所有其他開啟的 tooltip。
2	show.zf.tooltips tooltip 顯示時觸發。
3	hide.zf.tooltips tooltip 隱藏時觸發。

序號

名稱和描述

tooltip.zf.tooltips

觸發關閉頁面上所有其他開啟的 tooltip。

show.zf.tooltips

tooltip 顯示時觸發。

hide.zf.tooltips

tooltip 隱藏時觸發。

它顯示 tooltip 並觸發一個事件以關閉其他 tooltip。它觸發 Closeme#event:tooltip Tooltip#event:show 事件。

它隱藏當前 tooltip 並在由於碰撞而發生更改時重置定位類。它觸發 Tooltip#event:hide 事件。

除了靜態的 show() 和 hide() 函式之外，.toggle 還添加了一個切換方法。

它銷燬 tooltip 例項，並且模板元素將從檢視中移除。

foundation_media.htm

列印頁面