BOOtstrap源码分析之tooltip、popover

一、tooltip（提示框） 源码文件：

Tooltip.js
Tooltip.scss 实现原理：

1、获取当前要显示tooltip的元素的定位信息（top、left、bottom、right、width、height等）
2、计算tooltip的位置，是top、left、bottom、right其中一个
3、然后根据计算的位置值，运算出坐标值
4、给tooltip应用坐标值

源码分析：

1、ownerDocument：文档；包含两个对象： 、documentElement（根节点）
2、$.contains(domA, domB)：判断domA是否包含domB元素
3、应用了offset.setOffset方法，传入了using参数，因为offset设置值的时候，不能四舍五入
4、$viewport：显示tooltipr的容器元素
5、getPosition：此函数获取元素定位坐标相关的信息，如：top、left、bottom、right、width、height、scroll等
5.1、共用到了getBoundingClientRect方法，但此方法在IE8-会插件width、height
5.2、如果是body，width、height会被重置为window的
5.3、源码如下：

$element   = $element ||  this .$element  //  如果没有传入参数，则以$element（触发tooltip事件的元素）为准 

     var  el     = $element[0 ]
      var  isBody = el.tagName == 'BODY'

     var  elRect    =  el.getBoundingClientRect()
      if  (elRect.width ==  null  ) {
        //   width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093 
      elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom -  elRect.top })
    }
      var  elOffset  = isBody ? { top: 0, left: 0  } : $element.offset()
      var  scroll    = { scroll: isBody ? document.documentElement.scrollTop ||  document.body.scrollTop : $element.scrollTop() }
      var  outerDims = isBody ? { width: $(window).width(), height: $(window).height() } :  null 

 return  $.extend({}, elRect, scroll, outerDims, elOffset) 

查看更多关于BOOtstrap源码分析之tooltip、popover的详细内容...