Pure CSS tooltip without jQuery

css, html, javascript

Solution

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

Problem

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

Original source

Related problems