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 tooltip">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>
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 工具提示插件相关推荐
- Bootstrap 工具提示插件Tooltip 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑4: 表 5‑4 tooltip插件的选项 名称 类型 默认值 ...
- Bootstrap 工具提示插件Tooltip的方法
方法 1..tooltip(options) 使用一个可选的对象参数 options调用某个页面元素的工具提示.如: $('#element').tooltip ({ placement: rig ...
- 【bootstrap教程】Bootstrap 工具提示(Tooltip)插件
文章转载自 [http://www.php230.com] 链接地址 Bootstrap 工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示 ...
- Bootstrap3 工具提示插件的事件
工具提示插件的事件 Bootstrap为工具提示插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 4‑6. 表 4‑6 tooltip插件的事件及含义 ...
- Bootstrap3 工具提示插件的方法
工具提示插件的方法 1..tooltip(options) 使用一个可选的对象参数 options调用某个页面元素的工具提示.如: $('#element').tooltip ({ placeme ...
- Bootstrap3 工具提示插件的选项
工具提示插件的选项 Bootstrap为工具提示插件提供了 10 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.这些选项详细见表 4‑5: 表 4‑5 tooltip插件 ...
- Bootstrap3 工具提示插件的使用方法
工具提示 当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能. HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏 ...
- bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动 插件地址:http://silviomoreto.github.io/boot ...
- Bootstrap 轮番插件Collapse 调用方式
调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...
最新文章
- PHP 7.0新增特性详解
- docker-compose up volumes 调用外部文件,权限问题 cannot open directory xxxxx .: Permission denied
- Java:带符号右移和无符号右移
- linux 操作系统详解,Linux操作系统详解
- Autofac之自动装配
- pycharm 配置设置远程调试【远程解释器】
- php7不解析下载,Centos7 配置apache和php,登陆web提示下载,不解析php文件
- go语言之进阶篇字符串转换
- Alcor(安国)AU6983量产工具(100421)量产成功教程
- w ndows7如何清理垃圾,Win7系统清理:如何清理Win7系统盘垃圾
- 【转】S60 V3 常见问题解决方法...
- 机器学习算法工程师领域现状
- 分享10种用户点击率高的汽车软文标题公式
- 【译】Ignition:V8解释器
- Nginx的安装使用----反向代理服务器
- 解决“你的许可证不是正版,并且你可能是盗版软件的受害者。使用正版Office,避免干扰并保护你的文件安全。”
- 彻底解密C++宽字符
- Cisco思科交换机 入门 - 查看和更改交换机系统时间
- python包管理工具总结
- 第二章:3ds max材质和贴图
热门文章
- 測试AtomicInteger与普通int值在多线程下的递增操作
- 企业以太坊联盟发布了愿景文件
- CentOS 6.2编译安装Nginx1.2.0+MySQL5.5.25+PHP5.3.13
- nginx+tomcat 动静分离
- 泰囧成功背后社会化营销功不可没
- 操作系统(2)-创建线程的几种方式
- 算法高级(34)-搜索引擎速度快的秘诀-倒排索引介绍
- pytorch学习笔记(4):tensorboard可视化
- java 是否含有日文_Java踩坑记系列之Arrays.asList
- 当科学家们使用计算机来试图,当科学家们使用计算机来试图预测复杂的--易哈佛考试题库...