Pure CSS tooltip without jQuery [duplicate]

Question

Possible Duplicate:
How can I create a “tooltip tail” using pure CSS?

I would like to create a Facebook/ Twitter style tooltip (that thing when you hover over people's profiles and there's a short summary of their profile). I came across a lot of tutorials but they use jQuery. Is there a way to do this is CSS and maybe javascript?

+I'd like for this to work on images as well.

Thanks

Answer 1

You can do it with pure css

You can use the hover pseudo class to trigger it.

Here is a general concept that should get you started

div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }

<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>

http://jsfiddle.net/AsKpv/

the div will need to follow the a tag for the '+' to work with CSS

if you want to make it snazzy you could use opacity: 0 and opacity:1 with a css3 transition to make it fade in as well.

good luck