Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Automatic popover arrow placement

See original GitHub issue

Using the latest build based on Popper.js I don’t see how to automatically place the popover arrow. When the button is on an edge of the screen the arrow is still in the middle of the popover.

NOW:-----------------------------------------------------------------------|
                                                                  ---------|
                                                                  |  link ||
                                                                  ---------|
                                           ---------------^----------------|
                                           |           popover            ||

EXPECTED:------------------------------------------------------------------|
                                                                  ---------|
                                                                  |  link ||
                                                                  ---------|
                                           ---------------------------^----|
                                           |           popover            ||

I see in the Popper demos it can position the arrow properly, so this is Bootstrap specific issue. Because the arrow uses :after selector it might be tricky to fix it programmatically. I suppose arrow positioning should be delegated to Popper.

Issue Analytics

State:
Created 6 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

3reactions

alecplcommented, May 23, 2017

@Johann-S aside of the popover position issue (popper.js bug?) I see it set left:0px on the arrow element, but Bootstrap overwrites this with left:50% on .popover.bs-popover-bottom .arrow::after, .popover.bs-popover-bottom .arrow::before. left:0 will of course not look good with Bootstrap arrow, some more work will be needed.

0reactions

FezVrastacommented, May 23, 2017

@Johann-S The problem is that you are positioning with CSS the .arrow:before and .arrow:after pseudo selectors while Popper.js can only apply the position to the .arrow element.

It expects the arrow to have a width, but in Bootstrap the .arrow element doesn’t take any space, leaving to the :before/:after pseudo-elements the job.

An easy fix is to simply get rid of any positioning applied to the :before/:after and move it to the .arrow selector.

.arrow {
  position: absolute;
  width: 22px;
  height: 11px;
}

https://codepen.io/FezVrasta/pen/oWJJYd

You will want to address the 4 base placements like I do in the Popper.js demo website: https://github.com/FezVrasta/popper.js/blob/master/docs/css/popper.css#L43-L118

Top Results From Across the Web

How to control popover-arrow position in bootstrap 4

You can adjust the position of the arrow with the following styles: Bootstrap 3 .popover.bottom > .arrow { margin-left: 50px; }. Bootstrap 4...

Popovers - Stacks

Manual positioning for arrows is also provided. Arrow direction (top, right, bottom, left) will appear first, followed by the secondary (center, top, right, ......

Popover arrow - Material Design for Bootstrap

I't like my popvers to look like shown on the bootstrap page with the nice arrow. The mdb does not show an arrow,...

Popovers - Bootstrap

How to position the popover - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient...

Arrow | Popper

The arrow modifier positions an inner element of the popper so it appears centered relative to the reference element, usually the triangle or...