Oct 12, 2006

Tooltips

Here is a cool little CSS trick I stumbled across thanks to Len Kutchma and the Theatrum Mundi Blog. By hovering -here- This is a tooltip created purely with CSS and does not involve the use of any javascript.

Because it is css-based it's appearance is highly customizable.
you can see the tooltip in action.

You can find the code and instructions for creating tooltips -here-

I experimented with the code and was also able to get the code to pop an image, check this example out.

Would you like to meet the Holywood Poker girls? Just hold your mouse
-here- to see these lovely ladies.(keeping hovering to see all the girls)

Cool eh? To pop a image just replace the text of the original code in Len's example with <img src="http://your image address.gif"/> and your image will pop on hover.


Technorati Tags: ,

1 comment:

sutherland_douglass said...

Hi, I was wondering if you could provide the code--I follow the links but don't seem to find the code there. I'm actually tring to find a way to include collapsible text "layers" in my posts. I.e., so that someone viewing the page could click on a particular word in a post, and a new, collapsible layer of additional text, related to that word or phrase, appears (which can then be collapsed). I can't figure out how to do that in blogger, so the hover/appearing text box seems to be the next best thing. Any help on the above would be greatly appreciated (nice site, btw)!