Bootstrap: Automatic popover arrow placement

[alecpl]

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.

[Johann-S]

Thank you @alecpl for your feedback 👍
Is it possible to post a CodePen with steps to reproduce that ?

[alecpl]

It's as simple as creating a popover for a button that is on the right side of the screen. Something like:

$(button).popover({content: 'some content longish...', placement: 'bottom', trigger: 'click'})

and make sure the popover does not wrap the content text so it's much wider than the button.

[Johann-S]

So I made a Codepen to demonstrate what you reported @alecpl see : https://codepen.io/Johann-S/pen/dWwQyX

The first button is our current dist of Bootstrap
And the second button use x-arrow attribute provided by Popper (see https://popper.js.org/popper-documentation.html#modifiers..arrow) but I'm not sure it's what you want in term of result

[alecpl]

@Johann-S Thanks for working on this. Popover2's popover position is out of screen, that's what I see. And arrow is in the middle, which is also wrong. The first button displays popover in a correct position only the arrow position is wrong. So, x-arrow here somehow broke the popover positioning nothing more.

[Johann-S]

Maybe @FezVrasta can help us on that issue ? About the positionning of the arrow by Popper.js

[alecpl]

@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.

[FezVrasta]

@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