Bootstrap: Bootstrap v4 Beta - Popover, Tooltip issue (popper.js)

[DaleMckeown]

When a container has a set height, and the content overflows, and that overflowing content contains a tooltip or popover, the position of the popover/tooltip is not correct:

Live example:
https://www.codeply.com/go/HcvuTaMZPu

@FezVrasta may be able to provide insight?

[DaleMckeown]

Argh, apparently this is an issue with popper.js directly.

https://github.com/FezVrasta/popper.js/issues/302

Closing...

[FezVrasta]

Sorry guys, I'll try to work on that bug when I have some free time to allocate

[Jossnaz]

this is a big bug! because a lot of people use html{ height:100%;} body{height:100%;} then have the content scroll. That means all popovers will fail to work almost _always_. It's not even _only_ the bug reported, but placements are _completely_ wrong generally. E.g. they appear top, should be bottom etc.

[FezVrasta]

If I have to give my opinion, the whole practice of set a fixed height to html and body is quite bad.
It changes completely the behavior of the whole document without any kind of advantage.

Said that, it's still a bug and it will get fixed anytime soon.

[myorangeca]

If I have to give my opinion, the whole practice of set a fixed height to html and body is quite bad.

@FezVrasta while I agree with you, but it is still and will continue to be practiced based on client's demand and project requirements.

[FezVrasta]

@myorangeca I'd be curious to see how this practice can need to be enforced to fulfill any requirement...

[myorangeca]

@FezVrasta the min-height and height for html & body is needed when having a left panel with absolute positioning.

[Jossnaz]

the height of html and body is used as well for full screen intro parts of the page. The thing is, using 100vh can cause some issues on mobile devices

[DaleMckeown]

@FezVrasta Setting the height on the html or body isn't necessary to trigger this bug - simply set the height of any div, then set the content overflow to visible and make the the content overflow.

See my live example below for a perfectly sound use case, which is to create a cross browser 'sticky footer'.

https://www.codeply.com/go/HcvuTaMZPu

[FezVrasta]

@DaleMckeown your bug has been fixed in Popper.[email protected] 🎉

[DaleMckeown]

@FezVrasta Confirmed, it has! Thank you :)