bootstrap源码学习与示例:bootstrap-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"
      })

它对应的LESS这tooltip.less。

你可能感兴趣的:(bootstrap)