W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 提示工具



当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。

Hover over me
Note 提示: 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js 。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js 。

创建提示工具

如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。

<a href="#" data-toggle="tooltip" title="W3C中文教程欢迎你!">Hover over me</a>

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

Example

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

位置

默认情况下,提示工具是显示在元素的上方。

使用 data-placement 属性可以设置提示工具子啊元素的上下左右:

Example

<a href="#" data-toggle="tooltip" data-placement="top" title="W3C中文教程欢迎你!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="W3C中文教程欢迎你!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="W3C中文教程欢迎你!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="W3C中文教程欢迎你!">Hover</a>
尝试一下 »
Note 提示:您还可以使用数据布局属性值为“auto”,这会让浏览器的工具提示的位置决定。例如,如果值为“auto left”,提示信息会在左侧时,可能显示,否则右边。

Complete Bootstrap Tooltip Reference

For a complete reference of all tooltip options, methods and events, go to our Bootstrap JS Tooltip Reference.