Bootstrap 工具提示插件

Tooltip 插件

工具提示（Tooltip）插件是一个小弹出框，当用户将鼠标指针移动到某个元素上时会出现:

如何创建一个 Tooltip

要创建工具提示，请将 data-toggle="tooltip" 属性添加到元素中。

使用 title 属性指定工具提示中应显示的文本:

<a href="#" data-toggle="tooltip" title="Hooray!">鼠标悬停</a>

注意：tooltip 工具提示必须用 jQuery 初始化：选择指定的元素并调用 tooltip() 方法。

以下代码将启用文档中的所有工具提示:

实例

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

Tooltip 的位置

默认情况下，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>

提示：还可以使用值为 "auto" 的 data-placement 属性，这将让浏览器决定工具提示的位置。例如，如果该值为 "auto left"，则工具提示将尽可能显示在左侧，否则将显示在右侧。

完整的 Bootstrap 工具提示参考

有关所有 tooltip 选项、方法和事件的完整参考，请转到本站的 Bootstrap JS 工具提示参考。