Forums

bikebone

Hello,

I'd like to apply a tooltip as described in «http://sixrevisions.com/css/css-only-tooltips» to an image map instead of some text. It should be done just using CSS.

Can anybody help?

Thank you!

Mottie

Following the example from the css tooltip and using the adjacent css selector (because area tags don't have a closing tag), I came up with this (demo):

HTML

(example from w3schools)

<img src="http://i53.tinypic.com/6e0vvb.gif&quot; width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="#sun" /><span>This is the Sun</span>
    <area shape="circle" coords="90,58,3" alt="Mercury" href="#mercury" /><span>This is Mercury</span>
    <area shape="circle" coords="124,58,8" alt="Venus" href="#venus" /><span>This is Venus</span>
</map>

CSS

map { position: relative; }
area + span { position: absolute; margin-left: -9999em; }
area:hover + span {
	position: absolute; /* can only be positioned relative to the entire map, not the area */
	left: 10px;
	top: -100px;
	z-index: 99;
	background: #FFFFAA;
	border: 1px solid #FFAD33;
	margin: 0;
	width: 250px;
	padding: 20px;
}

patas1818

I like this method but it only works on firefox, Is it possible that the new safari v6 and chrome v24 don't support it. please help

Eric

Like this http://www.websitecodetutorials.com/code/css/css-image-map-tooltips.php

treehouse : what would you like to learn today?

Forums

How to create a tooltip for an image map using CSS only?

HTML

CSS