Bootstrap source analysis of the ToolTip, PopOver

First, the ToolTip (hint box) source file:

Tooltip.js
TOOLTIP.SCSS Implementation principle:

1. Get positioning information for the element that is currently displaying the ToolTip (top, left, bottom, right, width, height, etc.)
2, calculate the position of the ToolTip, is top, left, bottom, right one of the
3, then according to the calculated position value, the operation of the coordinate value
4. Apply coordinate values to the ToolTip

SOURCE Analysis:

1. Ownerdocument: Document; Two objects:<doctype>, documentelement (root node)
2, $.contains (DomA, Domb): Determine whether DomA contains domb elements
3, the Offset.setoffset method is applied, the using parameter is passed in, because the offset setting value cannot be rounded
4. $viewport: The container element showing TOOLTIPR
5, GetPosition: This function obtains the information related to the position coordinates of the element, such as: top, left, bottom, right, width, height, scroll, etc.
5.1, common to the Getboundingclientrect method, but this method in ie8-will plug-in width, height
5.2, if the body,width, height will be reset to window
5.3. The source code is as follows:

$element = $element | | This. $element//If no parameters are passed in, the $element (the element that triggers the ToolTip event) will prevail    varel = $element [0]    varIsbody = El.tagname = = ' BODY 'varElrect =El.getboundingclientrect ()if(Elrect.width = =NULL) {      //width and height is missing in IE8, so compute them manually; see HTTPS://GITHUB.COM/TWBS/BOOTSTRAP/ISSUES/14093Elrect = $.extend ({}, Elrect, {width:elrect.right-elrect.left, Height:elRect.bottom-elrect.top})}varEloffset = Isbody? {top:0, left:0}: $element. Offset ()varScroll = {scroll:isbody? document.documentElement.scrollTop | |document.body.scrollTop: $element. scrolltop ()}varOuterdims = Isbody? {width: $ (window). Width (), Height: $ (window). Height ()}:NULLreturn$.extend ({}, Elrect, scroll, outerdims, Eloffset)

6, Getcalculatedoffset: Calculate the coordinate value of the ToolTip, using the width, height binary principle Realization
6.1. When bottom
6.1.1, top is the height of the positioning Element (POS) top+ positioned Element (POS)
6.1.2, left for positioning Element (POS) left– position Element (POS) Width/2–tooltip element width/2
6.2. When top
6.2.1, top is the height of the Top-tooltip element of the anchor element (POS)
6.2.2, left for positioning Element (POS) left– position Element (POS) Width/2–tooltip element width/2
6.3. When left
6.3.1, top for positioning element (POS) top– position Element (POS) Height/2–tooltip element Height/2
6.3.2, left is the width of the left–tooltip element of the anchor element (POS)
6.4. When right
6.4.1, top position Element (POS) top– positioning Element (POS) Height/2–tooltip element Height/2
Left + positioned Element (POS) width for 6.4.2, left, positioning element (POS)

6.5, the position of the small triangle, the general situation of the element of the position of 50%, but if the presence of the ToolTip is left, top, right, bottom hidden, you need to recalculate and adjust the position. Method name is: Getviewportadjusteddelta
6.5.1, first calculates the width, or height, of the overflow
6.5.2, and then calculates the value of Arrowdelta, hidden value * 2–tooltip width + tooltip width
6.5.3, sets the value of the top or left percentage of the triangle

Popover (pop-up box) source file:

Popover.js
POPOVER.SCSS Implementation principle

1, inherit the ToolTip implementation
2, more a title, you can also customize the content (inside can insert input, button and other interactive controls)

Bootstrap source analysis of the ToolTip, PopOver