Ruby's Louvre

每天学习一点点算法

导航

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。

posted on 2012-12-24 16:28  司徒正美  阅读(6559)  评论(1)  编辑  收藏  举报