Search code examples
popoverngx-bootstrap

Popover wrong arrow position

the popover arrow results slightly shifted down (in both left and right popover) and right (in both top and bottom popover).

Expected behaviour

[left] https://i.sstatic.net/UQxQG.png

Current behaviour

[left] https://i.sstatic.net/Ch5NC.png

I could not find any opened issues or bug.

There are broken demos on the ngx-bootstrap website. Is that a desired behaviour?

Thanks in advance.

Solution

  • i'm from ngx-bootstrap dev-team, and no, it's not a desired behavior :)

    This issue appears because of few positioning system changes in original bootstrap. Before we deploy new positioning for this you can add temporary fix by adding styles.

    For popover:

    .bs-popover-top .arrow, 
.bs-popover-bottom .arrow {
    margin-left: -8px;
}
.bs-popover-left .arrow,
.bs-popover-right .arrow {
    margin-top: -8px;
}

    And for tooltip:

    .bs-tooltip-top .arrow,
.bs-tooltip-bottom .arrow {
  margin-left: -6px;
}
.bs-tooltip-left .arrow,
.bs-tooltip-right .arrow {
  margin-top: -6px;
}