深入淺出：Bootstrap Tooltip的使用

一、Bootstrap tooltips

Bootstrap 提供了浮動層tooltips的插件用於在鼠標懸停或點擊某個元素的時候顯示提示信息，這個插件依賴於jQuery和popover插件。

以下是一個演示，當鼠標經過下方的按鈕時，會顯示一個提示信息：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="This is a tooltip">
Hover over me
</button>

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

data-toggle="tooltip" 聲明了這是一個tooltip元素，data-placement="top" 定義了tooltip出現的位置在上方，title 屬性定義了tooltip的內容。在Javascript中，使用$('[data-toggle="tooltip"]').tooltip() 調用tooltip函數來向所有包含了data-toggle="tooltip" 屬性的元素添加tooltip效果。

二、Bootstrap tooltip 上方居左

默認情況下Bootstrap tooltip會在元素上方居中顯示，如果想要在頂部左邊對齊，可以添加data-offset="0, -10"屬性，其中0定義水平居中，-10是指tip相對於目標元素向上偏移10px，也可以指定一個字符串，如data-offset="50%,-10" 這樣水平居中，垂直方向上向上偏移10px。

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-offset="0, -10">
Tooltip on top
</button>

三、Bootstrap tooltip 字體

通過Bootstrap自定義本地樣式來更改Bootstrap tooltip的字體，需要在自定義樣式表中針對.tooltip-inner元素進行樣式設置。

<style>
.tooltip-inner {
  font-family: "微軟雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>

四、Bootstrap tooltip 動態 無效

動態生成的頁面元素需要在渲染完成後才能調用tooltip方法，這裡提供了兩種方法：

1、從 window 對象上獲取元素，以便在加載後才運行以下的 JavaScript：

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

2、使用 jQuery插件：jQuery_lazyload_tooltips.js

$('img').lazyload({
        event: 'scroll',
        effect: 'fadeIn',
        threshold: 200,
        container: $('#content'),
        data_attribute: 'src',
        skip_invisible: true,
        callback: function() {
          $('[data-toggle="tooltip"]').tooltip();
        }
});

五、Bootstrap tooltip 無效

有時候我們會遇到tooltip無效的情況，可能是由於以下原因造成的：

1、Bootstrap和jQuery沒有正確引入，確認js、css文件路徑是否正確；

2、手動更改了Bootstrap或jQuery的某些樣式；

3、tooltip相關的元素包含了disabled 或 readonly 屬性；

4、綁定了tooltip之後，通過JS更改了tooltip相關元素的內容，但tooltip的內部事件處理機制並不會隨之動態更新。

六、Bootstrap tooltip 按鈕

使用按鈕時，需要注意tabindex="-1"屬性，為了防止按鈕獲得焦點而修改按鈕的狀態。

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

七、Bootstrap tooltip 偏移選取

Bootstrap的插件使用data-*屬性配置函數選項。

data-animation： 定義tooltip的動畫效果，值為true或false 默認為true；

data-container： 指定將tooltip附加到哪裡，值為字符串，如 ‘body’；

data-delay： 定義鼠標滑過後多久才顯示提示，以毫秒為單位的數值；

data-html： 默認值是false，如果設置為true，tooltip的內容可以包含html標記；

data-placement： 定義tooltip出現在目標元素的位置，值為 top, bottom, left, right ，默認值是 top；

data-template： 定義tooltip的完整 HTML 模板，可以自定義tooltip的樣式，必須包含.tooltip-inner和.arrow 兩個元素；

data-title：tooltip的文本內容；

data-trigger：指定觸發tooltip的事件，默認為hover，可用的值是：click、hover、focus、manual；

data-offset： 偏移量，數值或以數據格式，“px, py”作為參數

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" data-offset="10,0" title="Tooltip on right with offset">
Tooltip on right with offset
</button>

以上是Bootstrap tooltip的用法，不難看出，Bootstrap tooltip實現了一種簡潔、優雅的方式來為網站添加提示信息。