Bootstrap 4 工具提示
Bootstrap 4 工具提示
工具提示组件是一个小的弹出框，当用户将鼠标指针移到一个元素上时会出现。
如何创建 Tooltip
要创建工具提示，请为元素添加 data-toggle="tooltip" 属性。
使用 title 属性指定 tooltip 中应显示的文本。
<a href="#" data-toggle="tooltip" title="Hooray!">将鼠标悬停在我身上</a>
注意： 工具提示必须使用 jQuery 初始化：选择指定的元素并调用 tooltip() 方法。
以下代码将启用文档中的所有 tooltip。
示例
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
自己动手试一试 »
定位工具提示
默认情况下，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>
自己动手试一试 »
完整的 Bootstrap 工具提示参考
要查看所有工具提示选项、方法和事件的完整参考，请转到我们的 Bootstrap JS 工具提示参考。
