Tooltips on an image

Question

I have an image and on it are logos (it's a map), I want to have a little box popup with information about that logo's location when the user moves their mouse over said logo.

Can I do this without using a javascript framework and if so, are there any small libraries/scripts that will let me do such a thing?

Answer 1

Yes, you can do this without Javascript. Use an HTML image map, with title attributes, like this:

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>

The Stack Overflow logo refers to the image map, which defines a rectangle for each of the two words using an area tag. Each area tag's title element specifies the text that browsers generally show as a tooltip. The shape attribute can also specify a circle or polygon.

Answer 2

The title attribute is the simplest solution and guaranteed to work, and degrade gracefully for useragents that don't support it correctly.

Answer 3

A single image alone doesn't give the browser the semantic information on the logos within. You could use an image map to supply the coordinates. To achieve tooltips, just apply a title attribute to each link. For more sophisticated tooltips (such as with styling, multiple lines, etc.), you'll need something non-standard, such as UniTip.

Answer 4

MooTools has a nifty script for this. See MooTools Tips. Lightweight on the HTML as well.

Here's a demo of the 1.11 version.