Bootstrap 的 Tooltip 和 Popover

簡介

Tooltip 指提示框，Popover 指彈出框。

Tooltip

默認 Tooltip 功能是關閉的，使用前要手動開啟。

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

Tooltip 可以用在 <a> 和 <button> 標簽上。下面是它的完整代碼：

<a href="#" data-toggle="tooltip" data-original-title="Link Tooltip Default">Link Tooltip Default</a>

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

data-toggle="tooltip" 是必需的。<a> 標簽的話，顯示的是 data-original-title 屬性值；<button> 標簽的話，顯示的是 title 屬性值。默認提示框出現在頂部。

自定義提示框位置，使用 data-placement 屬性，它有 4 個可選的值。

1. top（默認）
2. right
3. bottom
4. left

舉個例子，完整的例子在 這里。

<a href="#" data-toggle="tooltip" data-placement="right" data-original-title="That's right!">Hover me ;)</a>

<button type="button" class="btn" data-placement="right" data-toggle="tooltip" title="That's right!">Hover me ;)</button>

Popover

默認 Popover 功能也是關閉的，使用前要手動開啟。

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

Popover 和 Tooltip 非常類似（默認出現位置為是右邊）。區別僅有 3 處：

1. data-toggle 為 popover。
2. 要指定 data-content，此為彈出框內容。而標題則是原來 data-original-title 或 title 的屬性值。
3. 可通過設置 data-trigger 屬性，選擇觸發顯示 Popover 的動作，默認為 click，可以設置為更為合理的 hover。

<a href="javascript:void(0);" data-toggle="popover" data-original-title="Popover title" data-content="Default Content" data-trigger="hover">Link Popover Default</a><br />

<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="Default Content" data-trigger="hover">Button Popover Default</button><br />

參考鏈接

http://getbootstrap.com/javascript/#tooltips
http://getbootstrap.com/javascript/#popovers

（完）