Created by: wojtask9
This fix is based on https://github.com/twbs/bootstrap/pull/23820 but it also fixes 'corner cases' from https://github.com/twbs/bootstrap/issues/23846
According to comment https://github.com/twbs/bootstrap/issues/23846#issuecomment-327465549 "The arrow element should have the same width of the actual space used by the arrow to properly get positioned" and "Note that the correct width is needed to position the arrow properly, and the margins are used to always ensure some spacing between the arrow and the popover's edge".
Also this PR fixes white arrow background with popover-header.
Note that 'old' solution is not valid anymore because .arrow
position is managed by popper.js
so it must be relative to .arrow
Notes:
- This fix requires https://github.com/FezVrasta/popper.js/issues/417 if we want
.popover
border larger than 1px. - converting to
rem
is very easy. -
calc()
can be removed if border and width use the same units - thanks to @NielsHolt and his PR (https://github.com/twbs/bootstrap/pull/23820) it should work also with browser zoom without any issues
- var $popover-arrow-width currently means "whole" arrow width (before it was only half). The same with $popover-arrow-height.
- $popover-arrow-margin is used to indicate margin between popover edge. We cannot set this to 0 because by default
.popover
use border-radius.