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

（完）