Created by: simonihmig
This overhauls the tooltip and popover arrows implementation, fixing a few problems:
1. arrows were not properly aligned to the trigger.
Fixes #25045 (closed) and fixes #23793 (closed)
2. the .arrow
element did not match the size and position of the actual visible arrow.
Same for tooltips. This possibly also fixes #23846 (closed), see https://github.com/twbs/bootstrap/issues/23846#issuecomment-327465549.
3. Fixed $popover-arrow-height
/ $tooltip-arrow-height
These Sass variables did not have any effect on the visual appearance. They were just used for the (wrong, see above) sizing of the .arrow
element, which has absolutely no visible effect. Only $...-arrow-width
had a visual effect, but it always determined implicitly both the width and height (height = width/2, so a 45° angle).
Also the value for width was wrongly used, AFAICT. Setting it to 10px
would lead to an arrow 20px
wide. My understanding of these dimensions is that $popover-arrow-width
should specify the width of the .arrow
(for top or bottom placement), as can be seen on the second screenshot above.
This has been fixed here. But for anyone who has customized the arrows with these variables, this would be a somewhat breaking change (the width will be the half of it as it has been before). But still I think this has to be done, as this restores that the assigned values now exactly match the visual dimensions.