search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.78k stars 517 forks source link

Tooltips positioned off screen in Chrome/Chromium/Edge with parent element "position: relative" (bootstrap default), display:inline #1162

Open tgoeg opened 3 months ago

tgoeg commented 3 months ago

Bug description

Seeing the exact same problem as #806 on a Drupal webform that provides a tooltip for a radio button using tippyjs, using a site template based on bootstrap. Bootstrap defines

.radio, .checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

This position: relative (not on html here like in the referenced ticket) together with display: inline is enough to misposition the tooltip way off the screen (to the left, in my case). It seems like a pretty common use-case to inline radio labels.

Note that this only happens on Chrome/Chromium/Edge, Firefox happily displays it where it should. Might be a webkit bug as well?

I think I am going to try and see whether the position: relative attribute is necessary and will disable it, but I feel this might be a problem more people might hit, given the popularity of bootstrap and its default attributes?

Reproduction

https://codepen.io/tgoeg/pen/wvZJzrz Again, note that this only happens in Chrome/Chromium/Edge (most likely all webkit browsers), Firefox works flawlessly.

Versions tested: edge: Version 122.0.2365.92 chrome: Version 123.0.6312.59 chromium: Version 120.0.6099.71

Firefox: 124.0 (works)

Meta-Issue: Can you please add to the reproduction guideline that in Codepen, the minuscule "Use template" button at the bottom of the screen has to be used? I lost half an hour trying to figure out how to actually get a link to my crafted test case as I started to work in the link provided in the reproduction guideline.