The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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

  • # April 3, 2011 at 12:39 pm


    I’d like to apply a tooltip as described in «» to an image map instead of some text. It should be done just using CSS.

    Can anybody help?

    Thank you!

    # April 4, 2011 at 2:33 am

    This reply has been reported for inappropriate content.

    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):


    (example from w3schools)


    SunThis is the Sun
    MercuryThis is Mercury
    VenusThis is Venus


    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;

    # February 14, 2013 at 3:33 pm

    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

    # February 14, 2013 at 7:19 pm

    This reply has been reported for inappropriate content.

    Like this

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed