Tooltip, popover, and tooltippover for BOOtstrap source code analysis

Tooltip, popover, and tooltippover for BOOtstrap source code analysis
1. tooltip source code file:

Tooltip. js
Tooltip. scss implementation principle:

1. Obtain the positioning information (top, left, bottom, right, width, and height) of the elements to display the tooltip)
2. Calculate the position of the tooltip, which is one of top, left, bottom, and right.
3. Calculate the coordinate value based on the calculated position value.
4. Apply coordinates to tooltip

Source code analysis:

1. ownerDocument: Document; contains two objects: <DocType> and documentElement (root node)
2. $. contains (domA, domB): judge whether domA contains the domB element.
3. The offset. setOffset method is applied, and the using parameter is passed in, because the offset value cannot be rounded up.
4. $ viewport: display the container elements of tooltipr
5. getPosition: This function obtains information related to element positioning coordinates, such as top, left, bottom, right, width, height, and scroll.
5.1. The getBoundingClientRect method is shared, but the width and height of this method are added in IE8.
5.2 if it is body, width and height will be reset to window
5.3 source code:

$ Element = $ element | this. $ element // if no parameter is input, use $ element (the element that triggers the tooltip event) as the standard 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. bo Ttom-elRect. top})} var elOffset = isBody? {Top: 0, left: 0 }:$ element. offset () var scroll = {scroll: isBody? Document.doc umentElement. scrollTop | document. body. scrollTop: $ element. scrollTop ()} var outerDims = isBody? {Width: $ (window). width (), height: $ (window). height ()}: nullreturn $. extend ({}, elRect, scroll, outerDims, elOffset)

6. getCalculatedOffset: calculates the coordinate value of the tooltip, which is achieved by the width and height half-fold principle.
6.1. bottom
6.1.1. top is the top + position element (pos) height of the position element (pos ).
6.1.2. left is the width of the Left-position element (pos) of the position element (pos)/2-tooltip element width/2
6.2. top hour
6.2.1. top is the height of the top-tooltip element of the position element (pos ).
6.2.2. left is the width of the left-position element (pos) of the position element (pos)/2-tooltip element width/2
6.3, left
6.3.1. top is the height of top-position element (pos) of position element (pos)/2-tooltip element height/2
6.3.2. left is the width of the left-tooltip element of the position element (pos ).
6.4. right hour
6.4.1. top is the top-position element (pos) height of the position element (pos)/2-tooltip element height/2
6.4.2. left is the left + position element (pos) width of the position element (pos ).

6.5. The position of the small triangle. Generally, the position of the element is 50%. However, if the tooltip is hidden by left, top, right, and bottom, you need to re-calculate and adjust the position. Method Name: getViewportAdjustedDelta
6.5.1 calculate the width or height of the overflow.
6.5.2. Then, calculate the arrowDelta value. The hidden value is * 2-tooltip width + tooltip width.
6.5.3 set the top or left percentage of the triangle

Popover (pop-up box) source code file:

Popover. js
Popover. scss implementation principle

1. inherit the tooltip implementation
2. A title is added and the content can be customized. (Interactive controls such as input and button can be inserted)