一、tooltip（提示框）
源码文件： Tooltip.js Tooltip.scss实现原理： 1、获取当前要显示tooltip的元素的定位信息（top、left、bottom、right、width、height等） 2、计算tooltip的位置，是top、left、bottom、right其中一个 3、然后根据计算的位置值，运算出坐标值 4、给tooltip应用坐标值
源码分析：
1、ownerDocument：文档；包含两个对象：
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({},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 6.4.2、left为定位元素(pos)的left + 定位元素(pos)宽度
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个精彩的专题：
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
