Bootstrap - Tooltip 外掛

上一頁
下一頁

當您需要描述連結時，工具提示非常有用。該外掛的靈感來自 Jason Frame 編寫的 jQuery.tipsy 外掛。工具提示此後已更新，無需使用影像即可工作，使用 CSS 動畫進行動畫處理，以及用於本地標題儲存的資料屬性。

如果您想單獨包含此外掛功能，則需要 tooltip.js。否則，如Bootstrap 外掛概述章節所述，您可以包含 bootstrap.js 或壓縮版 bootstrap.min.js。

用法

工具提示外掛按需生成內容和標記，預設情況下將其放置在觸發元素之後。您可以透過以下兩種方式新增工具提示：

  • 透過資料屬性 - 要新增工具提示，請將 data-toggle = "tooltip" 新增到錨標記。錨的標題將是工具提示的文字。預設情況下，工具提示由外掛設定為頂部。

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

  • 透過 JavaScript - 透過 JavaScript 觸發工具提示 -

$('#identifier').tooltip(options)

工具提示外掛與之前章節中討論的下拉選單或其他外掛不同，它不是僅使用 CSS 的外掛。要使用此外掛，您必須使用 jQuery（讀取 JavaScript）啟用它。要啟用頁面上的所有工具提示，只需使用此指令碼即可：

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

示例

以下示例演示瞭如何透過資料屬性使用工具提示外掛。

線上演示 
<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

選項

可以透過 Bootstrap 資料 API 或透過 JavaScript 呼叫新增某些選項。下表列出了這些選項：

選項名稱 型別/預設值 資料屬性名稱 描述
animation 布林值 預設：true data-animation 將 CSS 淡入淡出過渡應用於工具提示。
html 布林值 預設：false data-html 將 HTML 插入工具提示。如果為 false，則 jQuery 的 text 方法將用於將內容插入 DOM。如果您擔心 XSS 攻擊，請使用 text。
placement 字串|函式 預設：top data-placement

指定如何定位工具提示（即，top|bottom|left|right|auto）。

當指定 auto 時，它將動態重新定位工具提示。例如，如果 placement 為“auto left”，則工具提示將在可能的情況下顯示在左側，否則將顯示在右側。
selector 字串 預設：false data-selector 如果提供了選擇器，則工具提示物件將被委託給指定的目標。
title 字串 | 函式 預設：“ data-title 如果 title 屬性不存在，則 title 選項是預設標題值。
trigger 字串 預設：'hover focus' data-trigger 定義如何觸發工具提示：click| hover | focus | manual。您可以傳遞多個觸發器；用空格分隔它們。
content 字串 | 函式 預設：'' data-content 如果 data-content 屬性不存在，則為預設內容值
delay 數字 | 物件 預設：0 data-delay

以毫秒為單位延遲顯示和隱藏工具提示 - 不適用於手動觸發型別。如果提供數字，則延遲將應用於隱藏/顯示。物件結構為：

delay: { show: 500, hide: 100 }
container 字串 | false 預設：false data-container 將工具提示附加到特定元素。例如：container: 'body'

方法

以下是工具提示的一些有用方法：

方法 描述 示例

選項 - .tooltip(options)

 將工具提示處理程式附加到元素集合。 
$().tooltip(options)

切換 - .tooltip('toggle')

 切換元素的工具提示。 
$('#element').tooltip('toggle')

顯示 - .tooltip('show')

 顯示元素的工具提示。 
$('#element').tooltip('show')

隱藏 - .tooltip('hide')

 隱藏元素的工具提示。 
$('#element').tooltip('hide')

銷燬 - .tooltip('destroy')

 隱藏並銷燬元素的工具提示。 
$('#element').tooltip('destroy')

示例

以下示例演示瞭如何透過資料屬性使用工具提示外掛。

線上演示 
<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

事件

下表列出了用於處理工具提示外掛的事件。此事件可用於掛鉤到函式中。

事件 描述 示例
show.bs.tooltip 當呼叫 show 例項方法時，此事件會立即觸發。 
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
shown.bs.tooltip 當工具提示已對使用者可見時（將等待 CSS 過渡完成），此事件將觸發。 
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip 當呼叫 hide 例項方法時，此事件會立即觸發。 
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip 當工具提示已完成對使用者的隱藏（將等待 CSS 過渡完成），此事件將觸發。 
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

示例

以下示例演示瞭如何透過資料屬性使用工具提示外掛。

線上演示 
<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>
列印頁面
上一頁
下一頁
廣告