[b]一、tooltip（提示框） [/b][b] 源码文件： [/b] Tooltip.js Tooltip.scss [b]实现原理：[/b]  1、获取当前要显示tooltip的元素的定位信息（top、left、bottom、right、width、height等） 2、计算tooltip的位置，是top、left、bottom、right其中一个 3、然后根据计算的位置值，运算出坐标值 4、给tooltip应用坐标值[b] [/b] [b]源码分析：[/b]  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、源码如下：  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)宽度  [img]http://files.jb51.net/file_images/article/201606/201661383618506.jpg?201651383636[/img]  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百分比的值  [b]二、Popover（弹出框）[/b] [b] 源码文件：[/b]  Popover.js Popover.scss [b]实现原理：[/b]  1、继承tooltip实现的 2、多了一个标题，还可以自定义content（里面可以插入input、button等交互控件） 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。