Fix tooltip/popover arrow size and position

[simonihmig]

This overhauls the tooltip and popover arrows implementation, fixing a few problems:

1. arrows were not properly aligned to the trigger.

Fixes #25045 and fixes #23793

2. the .arrow element did not match the size and position of the actual visible arrow.

Before:

After:

Same for tooltips. This possibly also fixes #23846, see #23846 (comment).

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.

[Johann-S]

Thank you so much @simonihmig 👍