BOOtstrap源码分析之 tooltip、popover

一、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)宽度

   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等交互控件)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

【原创】bootstrap框架的学习 第五课

<h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。</p>

9330
来自专栏阮一峰的网络日志

SVG 图像入门教程

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是...

11310
来自专栏程序员互动联盟

css样式大全

字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD...

60140
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

79980
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

312100
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

10010
来自专栏进击的君君的前端之路

CSS常见样式(一)

32530
来自专栏逸鹏说道

逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

好几天没上QQ了,今天上了个QQ,,额....额...貌似消息还挺多,没及时回复的还请见谅~~刚好昨天无聊把水印这快封装出来了,支持图片水印,文字水印,索引图...

36960
来自专栏吾爱乐享

php学习之html的标签属性(一)

16330
来自专栏小灰灰

Css学习手册之基本篇

Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

45960

扫码关注云+社区

领取腾讯云代金券