3 ms·
one caveat, any approach like this (one that just uses css) will hide the tooltip if the thing it is tipping (or one of it's parents) is clipped by overflow:aut
by ryankshaw 14y ago
one caveat, any approach like this (one that just uses css) will hide the tooltip if the thing it is tipping (or one of it's parents) is clipped by overflow:auto/scroll/hidden. the only way to get around that is using javascript (the tooltip needs to be inserted into the dom outside of the element with constrained overflow, eg: as a child of body). I've found that in any decent size project I've done, eventually I run into that scenario, so I usually just start with a JS based approach from the beginning (bootstrap, jqueryUI, etc)
- philipwalton 14y agoI was going to say the exact same thing, but you beat me too it! I started with this approach when I built our tooltip library for my company, but eventually there were just too many gotchas. We switched to using JavaScript and inserting the generated element as a child of `body`.
- dhaffner 14y agoJust thinking aloud here. Could that problem be avoided by putting the tooltip element outside of the thing it is tipping, and then using a CSS selector like ".tipped-element:hover + .tooltip-element"? I'm sure there are some other caveats that would reveal themselves later even if this one is avoidable...