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

$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 "text-align: center"> 


 6.5、小三角的位置，一般情况下元素的50%的位置，但如果出现tooltip被left、top、right、bottom隐藏的时候，就需要重新计算和调整位置了。方法名为：getViewportAdjustedDelta

     6.5.1、首先计算出被overflow的宽度、或者高度

     6.5.2、然后计算出arrowDelta的值，隐藏值 * 2 –tooltip宽度 + tooltip宽度

     6.5.3、设置三角的top或left百分比的值 
二、Popover（弹出框）

 源码文件： 

Popover.js 

Popover.scss
实现原理： 

1、继承tooltip实现的

2、多了一个标题，还可以自定义content（里面可以插入input、button等交互控件）


如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。