Tooltips can play a big role in your web designs and that isn’t new anymore. Just use them correctly and they will help you improve user experience.
We have seen before how to create some good looking CSS3 tooltips and today you’ll learn how to create an image map with pins and tooltips.
A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox’s website, I decided to create these ones.
The principal purpose was to have something that is easy to use and update, without needing any developing knowledge.
As you will see further, you won’t need any developer skills to add pins with tooltips to an image. You’ll just need to add a
div with your content and set two HTML5 custom attributes for positioning it. I’d say is simple enough.
HTML5 data attributes and jQuery
Here’s how the syntax looks:
… and this is how you can get the above value with jQuery:
In this article, we’ll use data attributes to store information like positioning coordinates for our map pins. If you want to read more about HTML5 custom data attributes, go to MDN web docs.
#wrapper- This is the element that wraps all the other elements. Its
relativeand I bet you guess why’s that.
img- the image that will behave as “background”.
absolutepositioned element contains the pin and also the tooltip content which will be displayed on mouseenter event. Additionally, the
pin-downclass specify the pin type.
data-xpos="450" data-ypos="110"- HTML5 custom attributes that help you specify the X (left to right) and Y (top to bottom) axis values (px) for positioning the respective map pin. In this example, the pin will be positioned 450px from left to right and 110px from top to bottom.
There’s no much to explain here, I think the following lines are quite easy to understand:
Below you can find the jQuery code that will execute when the page loads:
How it works and how to use it
This is an example that works even on older browsers like IE6, though CSS3 features like gradients and shadows won’t be available of course.
Set the image (within
<div id="wrapper">element) you wish to add pins for.
Add the content you need to displayed as a pin with tooltip in
<div class="pin" data-xpos="450" data-ypos="110">
From now on, the jQuery will do the rest:
* Based on the image dimension, the relative wrapper inherits the image's `width` and `height`. * The initial content you added will be hidden (this is done via CSS) and new elements will be appended based on initial content. * Also, the appended pins and tooltips will be positioned using the coordinates you added as HTML5 data attributes. * Then, using `mouseenter` and `mouseleave` events, the tooltips are displayed/hidden.
I hope you enjoyed this tutorial and feel free to get in toch if you have any suggestions. Thanks for reading!