工具提示

JavaScript

工具提示？更像是酷提示。但說真的，工具提示很適合在頁面上顯示術語或動作的延伸資訊。

預設情況下，工具提示會在定義的術語上方的滑鼠游標上顯示。

The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite
clear of any branches, and, if allowed to fall, would have fallen at our feet.

聖甲蟲懸掛在任何樹枝上相當明顯，如果讓牠掉下來，牠就會掉到我們腳邊。

若要取得頂尖的頂端工具提示（哈哈），只要將類別 .top 加入 <span> 元素即可。

在影片中觀看此部分

The <span data-tooltip class="top" tabindex="2" title="Fancy word for a beetle.">scarabaeus</span>
hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.

聖甲蟲懸掛在任何樹枝上相當明顯，如果讓牠掉下來，牠就會掉到我們腳邊。

預設情況下，按一下工具提示會讓它保持開啟狀態，直到您按一下其他地方。不過，您可以透過新增 data-click-open="false" 來停用此功能

在影片中觀看此部分

this
<span data-tooltip class="top" tabindex="2" title="You see?  I'm open!">
  tooltip will stay open
</span>
while
<span data-tooltip class="top" data-click-open="false" tabindex="2" title="I don't stay open">
  this one will only be open when hovered
</span>

這個工具提示會保持開啟狀態，而這個工具提示僅會在滑鼠移入時開啟

您也可以透過將類別 .right 或 .left 新增到 <span> 元素，將工具提示置於字詞的右側和左側。

在影片中觀看此部分

在從右到左模式下使用 Foundation 時，「靠右」仍表示靠右，「靠左」仍表示靠左。

When he was dressed he went down the hall into the
<span data-tooltip class="right" tabindex="3" title="Aligned on the right">kitchen</span>.
The table was almost hidden beneath all Dudley's birthday presents. It looked as though
<span data-tooltip class="left" tabindex="4" title="Aligned on the left">Dudley</span>
had gotten the new computer he wanted, not to mention the second television and the racing bike.

他穿好衣服後，走過走廊進入廚房。桌子幾乎被達力的所有生日禮物淹沒。看起來達力已經得到他想要的全新電腦，更別提第二台電視和賽車腳踏車了。

明確定位

v6.4 新增：請注意！此明確定位模式是 v6.4 的新功能。

現在，對於工具提示，您可以定義提示的兩個位置。這些工具提示採用完全明確的定位模式，您可以同時使用 data-position 和 data-alignment 來定義方塊的兩個位置。

這些下拉式選單設定各種定位和對齊方式。有效的定位包括左/右/上/下。有效的對齊方式包括左/右/上/下/置中。靠左對齊表示左側應對齊。靠右對齊表示右側應對齊。置中對齊表示置中應對齊。

置於上方和下方

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
  Bottom Left
</button>

<button class="button" type="button"  data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
  Bottom Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
  Bottom Right
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
  Top Left
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
  Top Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
  Top Right
</button>

置於左方和右方

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top">
  Right Top
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top">
  Left Top
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center">
  Right Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center">
  Left Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom">
  Right Bottom
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom">
  Left Bottom
</button>

Sass 參考

變數

這個元件的預設樣式可以使用專案的設定檔中的這些 Sass 變數自訂。

名稱	類型	預設值	說明
`$has-tip-cursor`	關鍵字	`help`	已定義術語的預設游標。
`$has-tip-font-weight`	關鍵字或數字	`$global-weight-bold`	已定義術語的預設字重。
`$has-tip-border-bottom`	清單	`dotted 1px $dark-gray`	已定義術語的預設底部邊框。
`$tooltip-background-color`	顏色	`$black`	工具提示背景的預設顏色。
`$tooltip-color`	顏色	`$white`	工具提示字型的預設顏色。
`$tooltip-padding`	數字	`0.75rem`	工具提示背景的預設內距。
`$tooltip-max-width`	數字	`10rem`	工具提示的預設最大寬度。
`$tooltip-font-size`	數字	`$small-font-size`	工具提示文字的預設字型大小。預設情況下，我們建議使用比內文複製更小的字型大小。
`$tooltip-pip-width`	數字	`0.75rem`	工具提示的預設提示寬度。
`$tooltip-pip-height`	數字	`$tooltip-pip-width * 0.866`	工具提示的預設提示高度。這有助於計算工具提示與工具提示字詞的距離。
`$tooltip-radius`	數字	`$global-radius`	工具提示的預設半徑。

JavaScript 參考

初始化

JavaScript 中必須包含以下檔案才能使用這個外掛程式

foundation.core.js
foundation.tooltip.js
- 使用公用程式函式庫 foundation.util.box.js
- 使用公用程式函式庫 foundation.util.mediaQuery.js
- 使用公用程式函式庫 foundation.util.triggers.js

Foundation.Tooltip

建立 Tooltip 的新執行個體。

var elem = new Foundation.Tooltip(element, options);

觸發這些事件： Tooltip#event:init

名稱	類型	說明
`element`	jQuery	要附加工具提示的 jQuery 物件。
`options`	物件	用於擴充預設組態的物件。

外掛選項

使用這些選項自訂 Tooltip 的執行個體。外掛選項可以設定為個別的資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛建構函式的物件。深入了解 JavaScript 外掛的初始化方式。

名稱	類型	預設	說明
`data-hover-delay`	`數字`	`200`	滑鼠游標停留多長時間（以毫秒為單位）後，Tooltip 才會開啟。
`data-fade-in-duration`	`數字`	`150`	Tooltip 顯示的時間（以毫秒為單位）。
`data-fade-out-duration`	`數字`	`150`	Tooltip 消失的時間（以毫秒為單位）。
`data-disable-hover`	`布林值`	`false`	如果設為 true，會停用滑鼠游標停留事件開啟 Tooltip 的功能。
`data-disable-for-touch`	`布林值`	`false`	停用觸控裝置的 Tooltip。這有助於讓有 Tooltip 的元素在第一次輕觸時觸發其動作，而不是顯示 Tooltip。
`data-template-classes`	`字串`	`''`	初始化時，套用至 Tooltip 範本的額外選用類別。
`data-tooltip-class`	`字串`	`tooltip`	新增至 Tooltip 範本的非選用類別。Foundation 預設為「tooltip」。
`data-trigger-class`	`字串`	`has-tip`	套用至 Tooltip 錨定元素的類別。
`data-show-on`	`字串`	`small`	開啟 Tooltip 的最小斷點大小。
`data-template`	`字串`	`''`	用於產生 Tooltip 標記的自訂範本。
`data-tip-text`	`字串`	`''`	開啟時顯示在 Tooltip 範本中的文字。
`data-click-open`	`布林值`	`true`	允許 Tooltip 在使用點選或觸控事件觸發時保持開啟狀態。
`data-position`	`字串`	`auto`	Tooltip 的位置。可以是 left、right、bottom、top 或 auto。
`data-alignment`	`字串`	`auto`	Tooltip 相對於錨定的對齊方式。可以是 left、right、bottom、top、center 或 auto。
`data-allow-overlap`	`布林值`	`false`	允許重疊容器/視窗。如果為 false，Tooltip 會先嘗試根據 data-position 和 data-alignment 定義的位置，但如果會造成溢位，就會重新定位。@option
`data-allow-bottom-overlap`	`布林值`	`false`	只允許重疊容器的底部。這是下拉式選單最常見的行為，允許下拉式選單延伸至畫面底部，但不會影響或超出容器。Tooltip 則較不常見。
`data-v-offset`	`數字`	`0`	範本在 Y 軸上遠離錨定的距離（以像素為單位）。
`data-h-offset`	`數字`	`0`	範本在 X 軸上遠離錨定的距離（以像素為單位）。
`data-tooltip-height`	`數字`	`14`	距離（以像素為單位），範本間距會自動調整以符合垂直提示工具
`data-tooltip-width`	`數字`	`12`	距離（以像素為單位），範本間距會自動調整以符合水平提示工具
`data-allow-html`	`布林值`	`false`	允許提示工具中使用 HTML。警告：如果您要將使用者產生的內容載入提示工具，允許使用 HTML 可能會讓您面臨 XSS 攻擊。

事件

這些事件會從附加有提示工具外掛程式的任何元素觸發。

名稱	說明
`tooltip.zf.closeme`	觸發以關閉頁面上所有其他開啟的提示工具
`show.zf.tooltip`	當提示工具顯示時觸發
`hide.zf.tooltip`	當提示工具隱藏時觸發

方法

show

$('#element').foundation('show');

顯示提示工具，並觸發一個事件以關閉頁面上任何其他開啟的提示工具

觸發這些事件： Tooltip#event:closeme Tooltip#event:show

hide

$('#element').foundation('hide');

隱藏目前的提示工具，並重設定位類別（如果因為碰撞而變更的話）

觸發這些事件： Tooltip#event:hide

toggle

$('#element').foundation('toggle');

除了靜態 show() 和 hide() 函式之外，還新增一個 toggle 方法

_destroy

$('#element').foundation('_destroy');

銷毀提示工具的執行個體，從檢視中移除範本元素。

工具提示

基本工具提示

工具提示頂端

工具提示按一下

工具提示靠右和靠左

明確定位

置於上方和下方

置於左方和右方

Sass 參考

變數

JavaScript 參考

初始化

Foundation.Tooltip

外掛選項

事件

方法

show

hide

toggle

_destroy