Bootstrap - 工具提示：初学者的指南

你好，未来的网页开发者們！今天，我們將要進入Bootstrap工具提示的精彩世界。作為你們友善的鄰居計算機老師，我將指導你們一步一步地走進這個旅程。別擔心如果你從未寫過一行代碼——我們將從最基本的開始，然後逐步提升。所以，拿一杯咖啡（或者你喜歡的飲料），我們開始吧！

工具提示是什麼？

在我們深入細節之前，讓我們先了解工具提示是什麼。你有沒有在網站上將鼠標悬停在图标或文字上，然後看到一個帶有附加信息的小彈出窗口？那就是工具提示！它們就像小助手一樣，在不佔據主要內容的情況下提供額外的上下文或解釋。

啟用工具提示

現在，讓我們來動手寫一些代碼。我們首先要做的是在Bootstrap中啟用工具提示。別擔心；這比聽起來要簡單！

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

這段小腳本告訴Bootstrap：“嘿，我們想在這個頁面上使用工具提示！”這就像在黑暗的房間裡開燈之前一樣。

創建工具提示

讓我們創建我們的第一個工具提示。這就像給HTML元素添加幾個屬性一樣簡單：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="我是工具提示！">
在我上面悬停
</button>

這裡發生了什麼：

• 我們使用Bootstrap的btn和btn-secondary類來創建一個按鈕。
• data-toggle="tooltip"告訴Bootstrap這個元素應該有工具提示。
• title="我是工具提示！"是我們工具提示中將出現的文本。

當你在這個按鈕上悬停時，你會看到“我是工具提示！”彈出。神奇，對吧？

在鏈接上添加工具提示

工具提示不僅僅適用於按鈕。讓我們在鏈接上添加一個：

<a href="#" data-toggle="tooltip" title="點我進行跳轉！">在這個鏈接上悬停</a>

這個例子與我們的按鈕示例工作方式相同。當你在鏈接上悬停時，你會看到工具提示信息。

自定義工具提示

現在，讓我們來得更加高級一點。我們可以自定義我們的工具提示，讓它們更有趣：

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>工具提示</em> <u>使用</u> <b>HTML</b>">
悬停以查看HTML工具提示
</button>

在這個例子中，我們添加了data-html="true"以允許在工具提示中使用HTML。現在，我們可以使用如<em>、<u>和<b>這樣的標籤來設計我們的工具提示文本。

工具提示的位置

我們可以控制工具提示相對於我們元素的出現位置。讓我們嘗試所有四個位置：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="頂部工具提示">
在頂部顯示工具提示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="右側工具提示">
在右側顯示工具提示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="底部工具提示">
在底部顯示工具提示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="左側工具提示">
在左側顯示工具提示
</button>

data-placement屬性告訴Bootstrap將工具提示定位在哪裡。這就像告訴你的朋友在拍照時站在哪裡一樣！

帶有自定義HTML的工具提示

記得上面的例子中我們在工具提示中啟用了HTML嗎？讓我們進一步：

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>自定義標題</h3><p>這是一個段落。</p><img src='smiley.gif' alt='微笑臉'>">
悬停以獲得驚喜！
</button>

這個工具提示包含了一個標題、一個段落，甚至還有一張圖片！就像是在工具提示中的一個小型網頁。

標記

有時候，你可能想要對你的工具提示結構有更多的控制。那麼，自定義標記就派上用場了：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="自定義工具提示">
自定義工具提示標記
</button>

這個例子使用data-template屬性來定義我們工具提示的自定義結構。就像蓋房子而不是買現成的！

在禁用元素上的工具提示

通常，禁用的元素不會觸發用戶交互。但使用一點小技巧，我們可以讓工具提示在它們上面工作：

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="禁用工具提示">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>禁用的按鈕</button>
</span>

我們將禁用的按鈕包裹在一個可以獲得焦點的span中。就像給不能夠夠到頂層貨架的人一個助手！

選項

最後，我們來看看一些可以進一步自定義我們工具提示的選項：

選項	類型	預設值	描述
animation	boolean	true	對工具提示應用CSS淡入淡出過渡效果
container	string | false	false	將工具提示附加到特定的元素
delay	number | object	0	顯示和隱藏工具提示的延遲（毫秒）
html	boolean	false	在工具提示中允許HTML
placement	string | function	'top'	如何定位工具提示
selector	string	false	如果提供選擇器，則將工具提示對象委託給指定的目標
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	創建工具提示時使用的基礎HTML
title	string | element | function	''	如果title屬性不存在，則使用默認的標題值
trigger	string	'hover focus'	如何觸發工具提示 - click | hover | focus | manual

你可以在初始化你的工具提示時使用這些選項：

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

這段代碼關閉了淡入淡出動畫，添加了延遲，並將工具提示定位在元素的右側。

這就是你進入Bootstrap工具提示世界的第一步。記住，掌握這個（以及任何編碼概念）的關鍵是練習。嘗試創建一個網頁並向它添加不同類型的工具提示。嘗試不同的選項，看看你能創造出什麼。

在你還沒有察覺之前，你將成為工具提示大師，你的網頁將會充滿信息和互動性！快樂編程，並且在途中不要忘了樂趣！

Credits: Image by storyset