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

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 2

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.

Answer 3

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

Answer 4

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"&gt;
<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 5

Indeed mootools is one of the many frameworks
that allow you to add functionality to any element on
your webpage. Here is a link to a small tutorial.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools isn't really a copy-paste type of framework,
it encourages you to look over the supplied code and
roll your own solution with some excellent examples.

Answer 6

You can try javascript widget at http://www.taggify.net/ . Script allows to add tooltips for the part of the image - when user move mouse over the region on the photo the script popups tooltip, draws border around region and fades other parts. Cool thing for marking people on the photo. See demo at http://www.taggify.net/demo.aspx

Answer 7

Tool tip on an image doesn't work in IE 7. Is anybody know how to do it that will show in IE 7