Skip to content
GitLab

fix popover arrow computations and .arrow position

Closed Administrator requested to merge github/fork/wojtask9/popover_array_2 into v4-dev

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

before:

after:

Notes:

  1. This fix requires https://github.com/FezVrasta/popper.js/issues/417 if we want .popover border larger than 1px.
  2. converting to rem is very easy.
  3. calc() can be removed if border and width use the same units
  4. thanks to @NielsHolt and his PR (https://github.com/twbs/bootstrap/pull/23820) it should work also with browser zoom without any issues
  5. var $popover-arrow-width currently means "whole" arrow width (before it was only half). The same with $popover-arrow-height.
  6. $popover-arrow-margin is used to indicate margin between popover edge. We cannot set this to 0 because by default .popover use border-radius.