Bootstrap 4 工具提示
Bootstrap 4 工具提示
工具提示元件是一個小的彈出框，當用戶將滑鼠指標移到一個元素上時會出現。
如何建立 Tooltip
要建立工具提示，請為元素新增 data-toggle="tooltip" 屬性。
使用 title 屬性指定 tooltip 中應顯示的文字。
<a href="#" data-toggle="tooltip" title="Hooray!">將滑鼠懸停在我身上</a>
注意： 工具提示必須使用 jQuery 初始化：選擇指定的元素並呼叫 tooltip() 方法。
以下程式碼將啟用文件中的所有 tooltip。
示例
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
自己動手試一試 »
定位工具提示
預設情況下，tooltip 將顯示在元素的上方。
使用 data-placement 屬性來設定工具提示在元素的頂部、底部、左側或右側的位置。
示例
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">懸停</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">懸停</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">懸停</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">懸停</a>
自己動手試一試 »
完整的 Bootstrap 工具提示參考
要檢視所有工具提示選項、方法和事件的完整參考，請轉到我們的 Bootstrap JS 工具提示參考。
