Bootstrap Tooltip 插件
Tooltip 插件
Tooltip 插件是一个小的弹出框,当用户将鼠标指针移到某个元素上时出现。
提示: 插件可以单独包含(使用 Bootstrap 的单独 "tooltip.js" 文件),也可以一次性全部包含(使用 "bootstrap.js" 或 "bootstrap.min.js")。
如何创建 Tooltip
要创建 tooltip,请向元素添加 data-toggle="tooltip"
属性。
使用 title
属性指定 tooltip 中应显示的文本。
<a href="#" data-toggle="tooltip" title="Hooray!">将鼠标悬停在我身上</a>
注意: Tooltip 必须使用 jQuery 初始化:选择指定的元素并调用 tooltip()
方法。
以下代码将启用文档中的所有 tooltip。
示例
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
自己动手试一试 »
定位工具提示
默认情况下,tooltip 将显示在元素的上方。
使用 data-placement
属性将 tooltip 的位置设置在元素的顶部、底部、左侧或右侧。
示例
<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>
自己动手试一试 »
提示:您还可以将 data-placement
属性的值设置为 "auto
",这将允许浏览器决定 tooltip 的位置。例如,如果值为 "auto left
",tooltip 将尽可能显示在左侧,否则显示在右侧。
完整的 Bootstrap Tooltip 参考
有关所有 tooltip 选项、方法和事件的完整参考,请访问我们的 Bootstrap JS Tooltip 参考。