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"
      })

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap学习 by 司徒正美</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

<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。

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

刷新页面返回顶部

Ruby's Louvre

导航

公告

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