A comprehensive analysis of ToolTip and PopOver in Bootstrap and its application _javascript techniques

One, ToolTip (hint box)
Source file:
Tooltip.js
Tooltip.scss

Implementation principle:
1. Get the positioning information of the element that is currently to be displayed tooltip (top, left, bottom, right, width, height, etc.)
2, calculate the position of ToolTip, is top, left, bottom, right one of
3, and then according to the calculated position value, calculate the coordinate value
4. Apply coordinate value to tooltip

Source Analysis:
1, Ownerdocument: Documents, two Objects:<doctype>, documentelement (root node)
2, $.contains (DomA, Domb): Determine if DomA contains domb elements
3, the application of the Offset.setoffset method, passed the using parameter, because the offset set the value of the time, can not be rounded
4, $viewport: Display TOOLTIPR container elements
5. GetPosition: This function gets the information related to the coordinates of the element positioning, such as top, left, bottom, right, width, height, scroll, etc.
5.1, the total use of the Getboundingclientrect method, but this method in the ie8-will plug width, height
5.2, if it is body,width, the height will be reset to window
5.3, the source code is as follows:

 $element = $element | | this. $element//If there are no incoming parameters, the $element (the element that triggers the ToolTip event) is the quasi-var el = $e Lement[0] var isbody = El.tagname = = ' Body ' var elrect = El.getboundingclientrect () if (elrect.width = null) {//WI DTH and height are missing in IE8, so compute them; https://github.com/twbs/bootstrap/issues/14093 Elrect = $.extend ({}, Elrect, {width:elrect.right-elrect.left, HEI Ght:elrect.bottom-elrect.top})} var eloffset = Isbody? {top:0, left:0}: $element. Offset () var scroll = {scroll:isbody? document.documentElement.scrollTop | | document.bo Dy.scrolltop: $element. scrolltop ()} var outerdims = Isbody?

{width: $ (window). Width (), Height: $ (window). Height ()}: null return $.extend ({}, Elrect, scroll, outerdims, Eloffset) 

6, Getcalculatedoffset: Calculate tooltip coordinate value, use is the width, the height binary principle realizes
6.1. When bottom
The height of the top+ positioning Element (POS) of the 6.1.1, top as the positioning Element (POS)
Width/2–tooltip element Width/2 of the left– positioning Element (POS) for the 6.1.2 and left positioning elements (POS)
6.2, top when
The height of the top-tooltip element of 6.2.1, top as the anchor element (POS)
Width/2–tooltip element Width/2 of the left– positioning Element (POS) for the 6.2.2 and left positioning elements (POS)
6.3, left Time
The height/2–tooltip element height/2 of the top– positioning Element (POS) of the 6.3.1, top for positioning element (POS)
Width of left–tooltip element with 6.3.2, left as anchor Element (POS)
6.4. Right time
6.4.1, top for positioning element (POS) top– positioning Element (POS) Height/2–tooltip element Height/2
Left + positioned Element (POS) Width of 6.4.2, left as positioning Element (POS)

6.5, small triangle position, under normal circumstances element's 50% position, but if appears ToolTip is left, the top, the right, bottom hides, then needs to recalculate and adjusts the position. The method name is: Getviewportadjusteddelta
6.5.1, first calculate the width, or height, of the overflow
6.5.2, then calculate the value of Arrowdelta, hidden value * 2–tooltip width + tooltip width
6.5.3, setting the top or left percent value of a triangle

Second, popover (pop-up box)
source file:
Popover.js
Popover.scss

Implementation principle:
1, inherit the tooltip realization
2, a more than a title, you can also customize the content (inside can insert input, button and other interactive controls)

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to learn JavaScript program to help you.