This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make
a
relative, so this means thata:before
element will have position relative to his parenta
.To place tooltip right under links I used
bottom
attribute instead ofmargin-top
. Because I usedposition: relative
to link - this means thatbottom:0
for example it is when tooltip has it's bottom border right on the bottom border of the parenta
.Because you want to see tooltips under links - in
:hover
I changedbottom
to1.4em
, which is little bit under text (.4em
will be distance between them).Because you want to see it animated I changed
transition
to includebottom
property instead of 'margin-top'.The last problem was that because you had
:before
element always in html flow - in case of second tooltip (which is big) - it occupies more space thana
, so when you hover it (not the link) - you can see it. So I also addedvisibility: hidden
to:before
element to make sure that if mouse will be over it you will not see it.