Bootstrap 工具提示插件

工具提示

当鼠标移动到特定元素上时，显示相关的提示信息，比如给出链接说明或缩写词的全称等，是一个非常人性化的功能。HTML本身就支持这样的功能，只需给任何元素添加 title 属性，当鼠标悬停时，浏览器就会将 title 属性的值作为提示信息显示出来。由于原生的工具提示样式单调、功能单一，经常需要自己去开发相关的工具提示功能。鉴于此，Bootstrap提供了一个工具提示插件，它功能完善，使用简单、灵活，深受广大开发者的喜爱。Bootstrap的工具提示插件Tooltip的原型是 Jason Frame 开发的 jQuery.tipsy 插件，但Tooltips做了很多改进，它不需要依赖图片，而是改用CSS3实现动画效果，用data属性存储标题信息。工具提示插件需要 bootstrap-tooltip.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-tooltip.js 文件。

使用方法

可以给任何元素添加 title 属性或 data-original-title 属性，来定义提示的内容。工具提示插件优先使用 title 属性的值作为提示内容，如果没有提供 title 属性或它的值为空，才使用 data-original-title 属性的值作为提示内容。以下两种声明方式的效果相同：

<a href="#" data-toggle="tooltip" title="This is the to
b600
oltip">Tooltip Example</a>

<a href="#" data-toggle="tooltip" data-original-title="This is the tooltip">Tooltip Example</a>

出于性能的考虑，Bootstrap并不支持通过 data 属性来激活工具提示插件，需要开发人员通过Javascript代码手动初始化才行。因此，鼠标移动到上述链接上，并不会显示相关的提示信息。手动初始化工具提示插件的方法很多，最简单的方法为：

$('[data-toggle="tooltip"]').tooltip();

现在，当鼠标在链接上悬停时，就会显示工具提示。运行效果如图 5‑6所示：

图5-6 Bootstrap工具提示插件Tooltip当然，也可以单独指定一个元素，在该元素上调用工具提示插件，还可以提供各种自定义参数。如：

$('[data-toggle="tooltip"]').tooltip();

<script>

$('#example').tooltip({

  title: "This is the tooltip",

  placement: "right"

});

</script>

版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。