最新的Web开发教程
 

Bootstrap提示插件


该工具提示插件

该工具提示插件是当用户在一个元素上移动鼠标指针出现小幅弹出对话框:

将鼠标悬停在我

提示:插件可以单独包括(用Bootstrap's个体"tooltip.js"文件),或一次(使用"bootstrap.js""bootstrap.min.js"


如何创建一个工具提示

要创建一个提示,添加data-toggle="tooltip"属性的元素。

使用title属性来指定要在工具提示里面显示的文本:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

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

下面的代码将使文档中的所有工具提示:

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

定位工具提示

默认情况下,工具提示将显示在元件的顶部。

使用data-placement属性来设置在顶部,底部工具提示,左侧或元件的右侧的位置:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
试一试»

提示:您还可以使用data-placement属性与“自动”的值,这将让浏览器决定工具提示的位置。 例如,如果值是"auto left" ,工具提示将显示在左侧可能时,否则在右边。


完成引导工具提示参考

有关所有提示选项,方法和事件的完整参考,请访问我们的引导JS工具提示参考