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.
Tooltip Positioning Issue
See original GitHub issueIssue
When integrating with Bootstrap (if this needs to be logged with BS please let me know), I’ve noticed that when I set a container’s min-height programmatically or statically to fill the viewport, the positioning of any tooltips within this container go off-center.
CodePen demo
https://codepen.io/davcpas1234/full/KXxYdZ/
Pre-requisites
- Requires “a” wrapper element to have
min-heightcalculated by jQuery to be equal to 100%
What is the expected behavior?
Tooltip is displayed in correct position relative to element (a button in this example)
What went wrong?
Tooltip is displayed off-center (screenshot from codepen):
Positioning resolves if resized when “displayed”
I’m suspecting that this has something to do with the scrollbar, as when the scrollbar is displayed the tooltips are displayed in the correct position:
Any other comments?
- Tested on Chrome 61.0.3163.100
- Tested on Edge
- Tested on Chrome Canary 63.0.3239.5
Issue Analytics
- State:
- Created 6 years ago
- Reactions:4
- Comments:21 (7 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I was seeing a similar issue and I figured out the root cause.
As was said previously, the situation arises when an element on the page has as height the entire viewport (
100vh). Imagine the following DOM:What happens is that right before the computation of the position of the popper, the popper gets
position: absolute. However, since the popper appears after the page in the DOM, it will be positioned after it as well. Since the height of the page then becomes100vh + height(popper), the scrollbar appears. This can be seen on https://codepen.io/anon/pen/zRaaLa.So right before the position is computed, the scrollbar appears (whereas it was invisible before). As you can imagine, this messes it up and this is why the positioning is shifted just by the width of the scrollbar. After the computation is done, the popper is positioned and so the scrollbar disappears.
Solution 1 (in client): place the popper element before any element on the page that has a
100vhheight.See https://codepen.io/anon/pen/rJKKoK for why this works.
Solution 2 (in client): set
top: 0on the popperThis would force the positioning of the popper while the computation is done. After, this property would be overridden as the library sets a
topproperty in thestyleattribute.@danwad Here is a fork of your Codepen where this fix is applied: https://codepen.io/anon/pen/GQGGmV. As you can see, the tooltip is correctly centered simply by adding
.tooltip { top: 0; }.Solution 3 (in library):
Alternatively, I managed to fix it by surrounding the line https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/methods/update.js#L29 (call to
getReferenceOffsets) with:This prevents the scrollbar from appearing when it matters, i.e. when computing the reference offsets. However, I’m not 100% sure that this fix won’t mess up some other edge cases.
I hope this helps!
FYI, this is also happening to me when I place the element as the last element in the body, while I have the height of <body> and <html> as 100%.
Solution 2 (setting top in the CSS) worked great for me!