全面解析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 相关文章推荐
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
小程序分享链接onShareAppMessage的具体用法
May 22 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
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
详解python3中zipfile模块用法
2018/06/18 Python
在双python下设置python3为默认的方法
2018/10/31 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python简单区块链模拟详解
2019/07/03 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
党员个人思想汇报
2013/12/28 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
厨师长岗位职责
2014/03/02 职场文书
安全生产标语
2014/06/06 职场文书
2014年法务工作总结
2014/12/11 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
golang使用map实现去除重复数组
2022/04/14 Golang