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.
<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
title element specifies the text that browsers generally show as a tooltip. The
shape attribute can also specify a circle or polygon.
Read more... Read less...
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.
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 use
title attribute for simple tooltip. its works on almost all DOM objects.