Bootstrap简单认识之Tooltips组件

Tooltips（提示工具）组件

一、简介

1. 此组件用到了Tether插件，Tether一般用于搞定两个元素的位置关系，如下代码:

   new Tether({
     // 此为主动附着元素
     element: blurEle,
     // 此为被依附元素
     target: greenEle,
     // 主动依附和被动依附都可以选择位置，两者通过x，y确定一个点
     // 最后呈现出来就是两个点重合
     // 主动依附
     attachment: 'bottom center',
     // 被动依附
     targetAttachment: 'top center'
   })

   那么所呈现出来的就是蓝色元素的左下角与绿色元素的顶部中间重合

2. 在指定 delay 即延迟弹出(收回)的情况下，且假设触发事件是click，一次点击后tooltip还没出来，立刻进行下一次点击，此时不是重置计数器，而是取消tooltip的弹出

3. 此组件的初始模板为

   <div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
    </div>
   </div>

   最简单的用法是在需要触发tooltip的元素标签上指定 title 属性，继而通过 $().tooltip() 初始化

4. tooltip 元素隐藏后会被从document中移除，而每次显现则再次插入到document中，在元素被插入document后，会触发 INSERTED事件

二、样式

主要就是两个类的样式： tooltip + tooltip-inner
关于内层的 .tooltip-inner

.tooltip-inner {
  // 指定了最大宽大，如果要在内部添加元素，则需要注意此限制
  max-width: $tooltip-max-width;
  ... ...
}

三、脚本

脚本主要用于控制tooltip的隐藏与显现，用户可以通过在初始化函数中传入对象，改变元素触发tooltip的方式，可以是 click, hover, focusin 这三种触发方式中一种或是多种组合。

默认属性

// 下面是默认属性，用户可以选择性的覆盖这些属性
const Default = {
  // 是否有动画
  animation   : true,
  // tooltip模板，一般是将内容插入到 '.tooltip-inner' 中
  template    : '<div class="tooltip" role="tooltip">'
              + '<div class="tooltip-inner"></div></div>',
  // 触发tooltip的方式
  trigger     : 'hover focus',
  // 可以是某个dom元素或是jquery对象或是一个函数(this指向依附的元素)
  // 注意这里是 data-title 属性
  title