Bootstrap3实用教程
4.7.1 工具提示插件的使用方法
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能。

HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏览器就会将 title 属性的值作为提示信息显示出来。

由于原生的工具提示样式单调、功能单一,经常需要自己去开发相关的工具提示功能。鉴于此,Bootstrap提供了一个工具提示插件,它功能完善,使用简单、灵活,深受广大开发者的喜爱。

Bootstrap的工具提示插件(tooltip.js)的原型是 Jason Frame 开发的 jQuery.tipsy 插件,但Tooltips做了很多改进,它不需要依赖图片,而是改用CSS3实现动画效果,用data属性存储标题信息。

使用方法

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

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

由于性能的原因,不能通过 data 属性直接激活工具提示插件,需要通过Javascript代码手动初始化它。只有初始化之后,将鼠标移动到链接上,才会显示相关的提示信息。否则,是不会显示任何提示信息的。

手动初始化工具提示插件的方法很多。最简单的方法,是通过data-toggle属性一次性初始化页面上的所有工具提示对象。如:

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

手动初始化工具提示插件之后,当鼠标在链接上悬停时,就会显示相应的提示内容。运行结果如图 4‑5所示:

工具提示
图4-5 工具提示

当然,你也可以单独初始化某个工具提示对象。比如,以下代码就只激活 id='#example' 的元素上定义的工具提示:

<p id="example">Tooltip Example</p>
$('#example').tooltip()

无论是一次性初始化页面上的所有工具提示对象,还是单独初始化某个工具提示对象,都可以提供一个自定义选项,来定制你的工具提示对象。如,以下代码就通过placement 选项指定在右侧弹出工具提示:

<script>
$('#example').tooltip({
  placement: "right"
});
</script>

默认情况下,提示框在目标对象的顶部显示,通过 data-placement 属性,可以设置提示框的显示位置,可选值有 top | bottom | left | right。效果如图 4‑6所示:

工具提示的显示位置
图4-6 工具提示的显示位置

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验