全面解析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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
Vue发布项目实例讲解
Jul 17 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
第十四节--命名空间
2006/11/16 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
详解AngularJS controller调用factory
2017/05/19 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
Python运算符重载用法实例
2015/05/28 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python os库常用操作代码汇总
2020/11/03 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
德国网上超市:myTime.de
2019/08/26 全球购物
大学新生军训方案
2014/05/03 职场文书
一体化教学实施方案
2014/05/10 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL