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)