Tooltip.js
Tooltip.scss 实现原理:
1、获取当前要显示tooltip的元素的定位信息(top、left、bottom、right、width、height等)
2、计算tooltip的位置,是top、left、bottom、right其中一个
3、然后根据计算的位置值,运算出坐标值
4、给tooltip应用坐标值
1、ownerDocument:文档;包含两个对象: 、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)
查看更多关于BOOtstrap源码分析之tooltip、popover的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did115137