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

title属性是最简单的解决方案，并且可以保证正常工作， 并且对于不正确支持它的用户代理，可以适当地降级。

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.

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

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