1. tooltip (prompt box)
Source code file:
Tooltip.js
Tooltip.scss
Implementation principle:
1. Get the positioning information of the element to be displayed (top, left, bottom, right, width, height, etc.)
2. Calculate the position of the tooltip, which is one of top, left, bottom, and right.
3. Then calculate the coordinate value based on the calculated position value
4. Apply coordinate values to tooltip
Source code analysis:
1. OwnerDocument: Document; contains two objects: <DocType>, documentElement (root node)
2. $.contains(domA, domB): determine whether domA contains domB elements
3. The offset.setOffset method is applied and the using parameter is passed in, because when offset is set, it cannot be rounded.
4. $viewport: Display the container element of tooltipr
5. getPosition: This function obtains information related to element positioning coordinates, such as: top, left, bottom, right, width, height, scroll, etc.
5.1. The getBoundingClientRect method is used, but this method can plug in width and height in IE8.
5.2. If it is a body, width and height will be reset to window
5.3. The source code is as follows:
$element = $element || this.$element //If no parameters are passed in, then $element (the element that triggers the tooltip event) is the default 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() } : nullreturn $.extend({}, elRect, scroll, outerDims, elOffset)6. getCalculatedOffset: calculates the coordinate value of tooltip, using the width and height folding principle to implement it
6.1. Bottom time
6.1.1. Top is the top + height of the positioning element (pos)
6.1.2. Left is the width of the positioning element (pos) /2 tooltip element width /2
6.2. When top
6.2.1. Top is the height of the top-tooltip element that locates the element (pos).
6.2.2. Left is the width of the positioning element (pos) /2 tooltip element width /2
6.3. When left
6.3.1. Top is the top positioning element (pos) height/2 tooltip element height/2
6.3.2. Left is the width of the left tooltip element that locates the element (pos).
6.4. Right
6.4.1. Top is the top positioning element (pos) height/2 tooltip element height/2
6.4.2. Left is the width of the positioning element (pos)
6.5. The position of the small triangle is generally 50% of the element. However, if the tooltip is hidden by left, top, right, and bottom, it needs to be recalculated and adjusted. 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, hide the value * 2 tooltip width + tooltip width
6.5.3. Set the value of the top or left percentage of the triangle
2. Popover (popup box)
Source code file:
Popover.js
Popover.scss
Implementation principle:
1. Inherit the tooltip implementation
2. With an additional title, you can also customize the content (interactive controls such as input and button can be inserted into it)
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.