bootstrap源码学习与示例：bootstrap-tooltip

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_33701564

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量117

点赞数

文章标签： javascript ViewUI

本文详细介绍了Bootstrap中的Tooltip组件，包括其配置选项如animation、placement等，并提供了示例代码展示如何初始化和使用Tooltip。

tooltip是bootstrap第二复杂的组件，近三百行。配置项比较多。并且需要手动初始化。另一个特点是没有自定义事件。

名称	类型	默认	描述
animation	布尔值	true	为工具提示添加一个淡入的过渡。
placement	字符串或函数	'top'	工具提示的位置：top \| bottom \| left \| right。
selector	字符串	false	如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
title	字符串或函数	''	如果'title'属性不存在的话，就使用该值做为默认的标题。
trigger	字符串	'hover'	工具提示的触发方式：鼠标经过(hover) \| 获得焦点(focus) \| 手动触发(manual)
delay	数字或对象	0	显示和隐藏时的延迟时间(以毫秒计) 如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。如果是一个对象，其结构就是: `delay: { show: 500, hide: 100 }`

一般来说它是用于内联元素，链接或图片什么的，通过把其title抽取出来构成浮动提示层。比如下面的HTML结构：

            <p class="muted" style="margin-bottom: 0;">
	      “这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。”
	      ——<a href="#" rel="tooltip" data-original-title="柴静始终站在离新闻最近的地方，她以她的犀利和敏锐、坚定与坚持，最终历练成为一名优秀的新闻工作者。 ">柴静</a>《看见》专访<a href="#" rel="tooltip" data-original-title="1954年8月16日生于加拿大的著名电影导演，擅长拍摄动作片以及科幻电影。">卡梅隆</a>
            </p>

使用如下：

  $('.muted a').tooltip({
            placement:"bottom"
      })

<!DOCTYPE html> <html> <head> <title>bootstrap学习 by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-tooltip.js"></script> <script > $(function () { var log = function(s){ window.console && console.log(s) } $('.muted a').tooltip({ placement:"bottom" }) }) </script> <script> </script> </head> <body> <p class="muted" style="margin-bottom: 0;"> “这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。” ——<a href="#" rel="tooltip" data-original-title="柴静始终站在离新闻最近的地方，她以她的犀利和敏锐、坚定与坚持，最终历练成为一名优秀的新闻工作者。 ">柴静</a>《看见》专访<a href="#" rel="tooltip" data-original-title="1954年8月16日生于加拿大的著名电影导演，擅长拍摄动作片以及科幻电影。">卡梅隆</a> </p> </body> </html>

运行代码

它对应的LESS这tooltip.less。