with CSS only
Apply a custom HTML attribute, eg. tooltip="bla bla" to your object (div or whatever):
<div tooltip="bla bla">
Define the :before pseudoelement of each [tooltip] object to be transparent, absolutely positioned and with tooltip="" value as content:
position : absolute;
content : attr(tooltip);
opacity : 0;
Define :hover:before hovering state of each [tooltip] to make it visible:
opacity : 1;
Apply your styles (color, size, position etc) to the tooltip object; end of story.
In the demo I've defined another rule to specify if the tooltip must disappear when hovering over it but outside of the parent, with another custom attribute, tooltip-persistent, and a simple rule:
@AndreaLigios Could this be changed, so that the tooltip is scaled to 1x1px when not shown and that pixel should be somewhere at 0,0 coordinates of the text? Currently there is a glitch in the demo: When putting the mouse at the area below the third div in the demo, the tooltip starts appearing, but then is moving away from the mouse-pointer, and so goes back to it's starting position, which again trickers the appearing. That's happening impressivly fast and shows a flickering.
jesus take the wheel
No way! That's really cool. I did not know that!!
I love that there are two great answers to this question. One simple and the other customizable.