Bigger/Fancy Tooltip Window Over Link?

I have seen several sites that when you hover over links a small popup "window" appears that is used as an enhanced Tooltip window. You can display multiple lines and even by the looks of things have HTML in them also.

When writing a post in ThinkBroadband there is a link near the top called "Markup in your posts". If for example I want a small popup "window" to appear when the cursor is over this link that displays some useful text about this page - the text that is displayed in the popup "window" may even be enough to save the visitor from having to visit the linked page. When the cursor is not on the link the popup "window" disappears.

Does anyone know what I need to be looking for functionally like this - obviously not on ThinkBroadbands site - I just used that as an example!

TIA

You can do it with Javascript or using css

edit: think may have missed something in example below - but if you google css & menu you can find examples of making popup menus - e.g. link (Just don't put any links in)

Similarly for Javascript - google menu + Javascript


css method (IE 7 on/ Firefox etc - i.e. not IE 6)

put something like this in the html

Text

1 23 45 67 89 10

<div class="key"><a href="key.php">Key</a> <ul><li><img src="../css/zoom.gif" /> Zoom In (or click on small photo)</li> <li><img src="../css/prev.gif" /> Previous Photo</li><li><img src="../css/indexsheet.gif"/> Index Sheet</li> <li><img src="../css/next.gif"/> Next Photo</li><li><img src="../css/project.gif"/> Slide show (requires javascript)</li> <li><img src="../css/more.gif"/> Similar photos (not all shown otherwise)</li></ul> </div>

and this in attached stylesheet

Text
1 23 45 67 89 1011 12	.key ul{         list-style-type: none;        display: none;         position: absolute;        left: 30px;         top: 3em;        background-color:#CCCCCC; }  .key:hover > ul {  display: block; }

Edited by Kenneth (Mon 20-Jul-09 22:04:11)

This works quite well for me.