This is done by creating a <div> which has the map image as the background. Links are placed inside this <div> for each location, and are positioned absolutely over the map. Inside each link is the tooltip text <span>, and a <div> with the class ‘dot’ to define the hotspot area. On the map shown, I have outlined these divs with a square, white border so you can see where they are. But of course you could make them entirely invisible if you wanted to.

Here’s the HTML structure:

<div id=”map”>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”dublin”>
      <div class=”dot”>
        <span> Dublin </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”edinburgh”>
      <div class=”dot”>
        <span> Edinburgh </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”london”>
      <div class=”dot”>
        <span> London </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”cardiff”>
      <div class=”dot”>
        <span> Cardiff </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”belfast”>
      <div class=”dot”>
        <span> Belfast </span>
      </div>
    </div>
  </a>
</div>

So to recap – the tooltip text and ‘dot’ hotspot are contained within a <div> named the class of the city it points to. This div is positioned absolutely over the map image. To create the tooltip, reuse the CSS from my previous tutorial (only with slightly different sizes and colours this time):

a.tooltip:hover { font-size:100%; } /* IE6 fix */ a.tooltip span {display:none; } a.tooltip:hover span { display:inline; position:absolute; padding:3px; background-color:#eee; border:1px solid #000; text-decoration:none; color:#7A2141; font-weight:bold; }

Then create the CSS for the map image, and the locations:

#map { position:relative; background:url(ukmap.png) no-repeat; width:244px; height:253px; border:1px solid #000; }

a.tooltip div.belfast { position:absolute; top:116px; left:90px; }
a.tooltip div.dublin { position:absolute; top:147px; left:80px; }
a.tooltip div.edinburgh { position:absolute; top:92px; left:142px; }
a.tooltip div.london { position:absolute; top:204px; left:179px; }
a.tooltip div.cardiff { position:absolute; top:196px; left:130px; }

Finally, create the CSS for the dot hotspots. This just decides how big each hotspot should be, and adds an optional border:

a.tooltip div.dot { width:10px; height:10px; border:#fff 1px solid; }

This will give you some working map tooltips! Of course, you may wish to position them a little better, as they overlap the dots a little. So you can either simply push them down a little like this:

a.tooltip div span { top:14px; }

or you can try and centre them:

a.tooltip div span { top:14px; margin-left:-250%; font-size:100%; }

Unfortunately this method is not terribly reliable, a better solution would be to make all the tooltip text <span> tags the same width, then negatively offset them by half their width:

a.tooltip div span { text-align:center; top:14px; width:60px; margin-left:-30px; font-size:100%; }

The second use for this CSS technique would be a Facebook style method of highlighting photographs. A list of items is shown under an image. When the mouse is hovered over one of the items, a box appears on the image. Like so:

To do this, you need to create a <div> which will hold the image and the list. Each list item will have a <span> inside it, which will be hidden initially, but show up over the image when the item is hovered over. Here’s the HTML:

<div class=”housemates”>
   <ul>
      <li><a href=”#” class=”person”>Jon <span class=”jon”></span></a></li>
      <li><a href=”#” class=”person”>Leonie <span class=”leonie”></span></a></li>
      <li><a href=”#” class=”person”>Andy <span class=”andy”></span></a></li>
   </ul>
</div>

The ‘housemates’ div should have the photo as a background, and have the photograph’s width plus some top padding to push the list down underneath:

.housemates { position:relative; background:url(housemates.jpg) no-repeat; width:419px; padding-top:343px; }

Then the size of the spans which appear when hovering should be set, using the CSS trick previously outlined:

a.person:hover { font-size:100%; } /* IE6 fix */
a.person:hover span { position:absolute; width:80px; height:100px; background:transparent; border:2px solid #fff; text-decoration:none; }

Finally each individual <span> is given a position over the image:

a.person span.jon { top:35px; left:72px; }
a.person span.leonie { top:39px; left:157px; }
a.person span.andy { top:30px; left:240px; }

And there it is, a simple way of using CSS to annotate your photos, Facebook style.