全面解析Bootstrap中tooltip、popover的使用方法

摘要：一、tooltip（提示框）源码文件：Tooltip.jsTooltip.scss实现原理：1、获取当前要显示tooltip的元素的定位信息...

一、tooltip（提示框）

源码文件：

Tooltip.js

Tooltip.scss

实现原理：

1、获取当前要显示tooltip的元素的定位信息（top、left、bottom、right、width、height等）

2、计算tooltip的位置，是top、left、bottom、right其中一个

3、然后根据计算的位置值，运算出坐标值

4、给tooltip应用坐标值

源码分析：

1、ownerDocument：文档；包含两个对象：<DocType>、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)

6、getCalculatedOffset：计算tooltip的坐标值，利用的是width、height折半原理实现

6.1、bottom时

6.1.1、top为定位元素（pos）的top+ 定位元素(pos)的高度

6.1.2、left为定位元素(pos)的Left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2

6.2、top时

6.2.1、top为定位元素(pos) 的top-tooltip元素的高度

6.2.2、left为定位元素(pos)的left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2

6.3、left时

6.3.1、top为定位元素(pos)的top – 定位元素(pos)的高度/2 – tooltip元素高度/2

6.3.2、left为定位元素(pos)的left – tooltip元素的宽度

6.4、right时

6.4.1、top为定位元素(pos)的top – 定位元素(pos)高度/2 – tooltip元素高度/2