Grow your CSS skills. Land your dream job.

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

  • # April 3, 2011 at 12:39 pm

    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!

    # April 4, 2011 at 2:33 am

    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)

    Planets

    SunThis is the Sun
    MercuryThis is Mercury
    VenusThis is Venus

    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;
    }

    # 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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".