Position of popover is slightly shifted

Bug description:

The popover is not shown at the middle of the element (see picture).

Alternativer Text

Same problem for placement="right" etc.

Link to minimally-working plunker that reproduces the issue:


Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.0.3

ng-bootstrap: 1.0.0-beta.4

Bootstrap: 4.0.0-beta

1 possible answer(s) on “Position of popover is slightly shifted

  1. yeah, i found the same problem at my project,

    the problem is on https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/popover.ts#L40
    the percentage positioning do not consider the arrow width, so to fix that just add a negative margin of half arrow width (the arrow width is 10px) to fix the centering.

    until it does not get patched you can fix it at your code by adding this lines on your css:

    • top and bottom fix
    .bs-popover-top .arrow, .bs-popover-bottom .arrow {
        margin-left: -5px;
    • left and right fix
    .bs-popover-left .arrow, .bs-popover-right .arrow {
        margin-top: -5px;