Images can be pretty lifeless and boring – unless they're interactive and awesome, that is. And qTip makes this easy, with the power of jQuery. Read on to find out how you can add interactive labels that appear when the user hovers over parts of an image.

Why would you want to do this? Personally, I'm using the technique in a new eCommerce site – so the user can hover-over elements of a scene (like an Ikea catalogue), with the product title and add to cart button appearing dynamically. It could also be used to good effect on something like a campus or town map, where there's lots of oddly shaped elements that could really do with a description without cluttering the map. A very simple example would also be Facebook tags, where hovering over a persons face will tell you who they are. Its uses are limited only by your imagination.

Note: I'm assuming a very basic knowledge of jQuery and HTML here – at least make sure you've read about selectors, methods, and anonymous functions.

qTip

qTip is a comprehensive tooltip and labelling plugin for jQuery, with a variety of styles. We'll be using it specifically with the image map functionality, but that's certainly not all it can do. Take a look at the plugin page to learn more, or read on to get started.

Making an Image Map

Image maps themselves certainly aren't a new thing - the markup elements have available for a long time, and way back in the day it was actually considered a good way of presenting a navigation system – with clickable parts of the image linking to different sections. The same basic image map code is still used for that portion of the functionality, so we'll need to define that first.

You can use a variety of tools to create an image map – Adobe Fireworks or Photoshop – but the easiest, and free, solution is an online tool like this one. It's certainly not the only online tool and I'm not endorsing it particularly, but it seemed simple enough to use – let us know in the comments if you find a better one. You can define rectangular, circular, or even polygonal shapes.

Start by uploading a picture – in this case, I'm going to label a screenshot of the MakeUseOf website. You may need to zoom out to view your full image in the tool.

It should be fairly obvious how to use it like a basic painting program - the only thing to remember is that when drawing a poly shape, you need to hold SHIFT on the last point in order to close off and finish. Here I've defined 4 shapes.

When you're ready scroll down and copy out the code given.

Create a basic new HTML document, and clean up the code a little, adding an image tag to point to your original image. The easiest way to do test this is using a JSFiddle. Here's my sample, in it's initial state (the final code set is given later, don't worry).

Remember to give the image a usemap attribute, pointing to #id of the map containing the coordinates (usemap="#mymap", for example).

Adding in qTip

If you're pasted your code at JSFiddle, you'll see there's an option on the sidebar to include jQuery. Make sure you enable that. We can also add other external resources here, so go ahead and add the URLs for CSS and JS listed on the qTip download page. Copy and paste the "all features and styles" links into JSFiddle – though in practice, you would use the configuration tool below that to build a custom set of features or styles.

The full implementation guide for qTip can be found here, but lets go ahead and create some simple text based tooltips. The following Javascript will target all area elements (the items that define the parts of our image map) on page load, telling qTip to work on them with content of whatever is in the alt attribute.

        
$(document).ready(function() {
$("area").each(function(index, element) {
var link = $(this);
$(link).qtip({
content: link.attr("alt")
});
});
});

    

The default design is pretty ugly - you can view a demo of it here - but that's ok, let's apply a custom design to the popups like this (I've omitted some of the code, showing only the qTip specific section).

        $(link).qtip({
content: link.attr("alt"),
style: {
classes: 'qtip-bootstrap qtip-shadow'
}
});

    

I've also included the BootStrap CSS file as an external file, to sort out ugly standard browser fonts. This is very much overkill, I know. Still:  much better!

One thing I now notice is that position default of bottom right is not really ideal. To adjust this, let's use the position setting:

        $(link).qtip({
content: link.attr("alt"),
style: {
classes: 'qtip-bootstrap qtip-shadow'
},
position: {
target: 'mouse',
adjust: {
mouse: true // Can be omitted (e.g. default behaviour)
}
}
});
});

    

Now hover over any element, and the tooltip will follow your mouse. You can view the finished demo here.

You can also make the popup modal (so everything else is dimmed away, and you need to click outside to get back to it), or even load in some content through an AJAX request. I think it's a pretty neat little plugin that breathes new life into a fairly unused HTML standard - let's see what you can come up, and do please let us know in the comments if you've made something with it.