Tooltips on an image


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?

8/24/2008 4:32:34 PM

Accepted Answer

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

<img usemap="#logo" src="">
<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">

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.

1/5/2018 1:22:34 PM

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.


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.


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.

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.


You can try javascript widget at . 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


you can use title attribute for simple tooltip. its works on almost all DOM objects.


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]