You may remember a previous post of mine, where I explained a method of using only CSS to create tooltips. Well here are two creative uses for that technique. Firstly – this map of the capital cities in the UK and Ireland. The locations are revealed when you hover your mouse over them:
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. (more…)