A slick way to make rollover tooltips with nothing other than a little css and some html - also works well for image thumbnail rollovers as well
In the past, I have made tooltips with JavaScript, and that can get lengthy and messy - I prefer to use JavaScript as little as possible. So I recently figured out a way to make tooltips and picture enlarging rollovers that is very simple and uses nothing but css and html.
Ok, first thing we need to do is to understand how this is going to work: basically, you are going to embed your tooltip with an element inside your link; for this example, I chose span as it is already there and easy to work with. Then we must hide that text with display:none; in css.
Now I want the tooltip to stay close to the link that you hover over to get it (you could use this to put the link anywhere on the page as well) so I have to make the link relative, and the embedded span will be positioned absolutely, and sice it is positioned absolutely to the relatively positioned link, it will appear relative to the link (wow... that looks confusing when I put it down in text).
Now with that out of the way, we just have to add a :hover state to the class and change it's display to display:block; to make it visible. Add a little formatting and you get the following css:
a.tooltip{position:relative;}You will notice that there is a z-index value in there. I picked a rather large number, but that is so the tooltip will always be visible over whatever you have on the page.
a.tooltip:hover{z-index:25;}
a.tooltip span{
display: none;position:absolute;top:1em; left:1em;
/* the line above is all that is necessary in a.tooltip span the rest is formatting - you can alter top and left */
padding:2px; border:1px solid Black; width:100px; background-color:Gray;}
a.tooltip:hover span{display:block;}
The css is now out of the way, time to move on to the html. All of the hard work is done, now we simply need to make a link with an embedded span which to contain our tooltip:
<a class="tooltip" href="" >And there you have it, a simple css rollover tooltip:
Roll over this
<span>For this kickin' tooltip!</span>
</a>
Roll over this For this kickin' tooltip!
*note: If you dont want the rollovers to appear clickable (usually the finger cursor) you can add cursor:default; to the a.tooltip:hover class.
Similiarly, you can do the same with images. For this example, I am using a full size imaged resized for the thumbnail, but you may want to use a separate smaller image so the preview loads faster for your user; its up to you: I changed the css class, removed the formatting and lsightly edited the positioning to get this for the css:
a.img_tooltip{position:relative;}And here is the html for an image rollover:
a.img_tooltip:hover{z-index:25;}
a.img_tooltip span{display: none;position:absolute;top:-1em; left:5em; }
a.img_tooltip:hover span{display:block;}
<a class="img_tooltip" href="" >
<img src="images/image.jpg" alt="thumbnail" style="width:100px;" />
<span><img src="images/image.jpg" alt="full image" /></span>
</a>
And there you have it, a simple way to get css rollover tooltips. They can be pretty useful when you want to stick something in your page but it may be intrusive or ugly to be there all the time.
A very simple example can be downloaded from the steal some code repository or just pick it up here: css_tooltips.zip (67.91 kb)