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


Posted in Javascript onJune 13, 2016

一、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
    6.4.2、left为定位元素(pos)的left + 定位元素(pos)宽度

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

 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程序设计有所帮助。

Javascript 相关文章推荐
display和visibility的区别示例介绍
Feb 26 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 #Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 #Javascript
JavaScript解八皇后问题的方法总结
Jun 12 #Javascript
jQuery遍历json的方法(推荐)
Jun 12 #Javascript
jQuery移动端图片上传组件
Jun 12 #Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 #Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 #Javascript
You might like
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
javascript引用对象的方法
2007/01/11 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
pow在python中的含义及用法
2019/07/11 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
新闻编辑求职信
2014/04/09 职场文书
促销活动总结范文
2014/04/30 职场文书
2014年物流工作总结
2014/11/25 职场文书
2014年小学工作总结
2014/11/26 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript