fix popover arrow computations

[wojtask9]

Current border of popover arrow can be only 1px.

This PR takes into account popover border too.

You can play with arrow border here: http://www.cssarrowplease.com/

Also this PR fixes white arrow background with popover-header

before:

after:

[Johann-S]

Please do not use any CSS for the position of our arrow, the arrow position is managed by Popper.js not our CSS

[wojtask9]

popper.js manages .arrow not .arrow:before and .arrow:after.

So it's safe to position these pseudo-elements.

[Johann-S]

Remove any css rules which manage the arrow position please

You're right @wojtask9 maybe you can add a Codepen to show your work

[wojtask9]

default border-width
https://codepen.io/anon/pen/ZyNxeN

border width 3px;
https://codepen.io/anon/pen/jwozmQ

Sadly I see bug with popover with header.
If popper.js starts manage .arrow then positioning is not added to popover-header and my fix isn't working :/ (see popover on right button)

[Johann-S]

You can change that line : https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L103
by : .arrow, .arrow::before, .arrow::after
It's the selector used by Popper.js to manage arrow position

[wojtask9]

But then additional html markup is required (not hard because only template must be modified)
Without template modifications I don't know how to manipulate popover-header:before pseudo-element.

[houndci-bot]

Begin pseudo elements with double colons: ::

[wojtask9]

I've changed .arrow order in popover template. Now we use adjacent sibling selector to detect if .popover-header is visible or not.
Everything should works correct.

updated codepen:
https://codepen.io/anon/pen/gRNxMd

[wojtask9]

also artifacts on on certain zoom level could be solved.
Instead of border on .popover use box-shadow with comma.
Not sure if bootstrap care about browser zoom.

[Johann-S]

No we don't handle browser zooming

[NielsHolt]

Hi
I think #23820 solve this issue without changing the template and also adding the use of rem in dimension the border and arrow

[wojtask9]

@NielsHolt
According to arrow scss computations your fix is better. I'll close this PR.
But without changing template you are not able to correctly position .popover-header::before.
With static example it looks OK but when arrow is not centered then you will observe artifacts

[wojtask9]

#23936 better fix