Tooltip in Full CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
Let’s explain a bit this code!
We look at all elements with a data-title defined as attribute
[data-title] then for the after and before pseudo-elements we set there positions and there opacity when we hover on the element or no.
Now on the specific before pseudo element we will create a small arrow. Here is a small convenient trick you just set a big bottom-border for a content of size 0 and then some right and left transparent borders.
Finally, the real part of the tooltip is in the after pseudo element, you just have to define the content from the data-title attribute with
content: attr(data-title) and that’s all.