News

How to create CSS tooltips with Tooltipster

We show you how to add CSS-based tooltips to static images using the jQuery plug-in Tooltipster by Caleb Jacob. This quick guide is perfect for setting you on your way

tooltipster

Visit the plug-in website at calebjacob.com/tooltipster and click the Download button to obtain the latest version. Unzip the ‘tooltipster-master.zip’ file – the files you will need are primarily found in the CSS and JavaScript subfolders so navigate to those and copy ‘tooltipster.css’ and ‘jquery.tooltipster.js’ into the root of your page.

Link the files

Open a new HTML page and attach our new plug-in files by first adding the script tag and src attribute for the main jQuery library. This can be downloaded and run locally, but here we’ve linked to the online repository for the latest version. Underneath, add the lines for the ‘jquery.tooltipster.js’ file and also a tag for the tooltipster.css stylesheet:

001 <head>
 002 <script src=”http://code.jquery. com/ jquery-2.0.1.min.js”></script>
 003 <script src=”jquery.tooltipster. js”>
 004 <link rel=”stylesheet” type=”text/ css” href=”tooltipster.css” />
 005 </script></head>

Add the function

Below these lines, just before your closing tag, we’ll add a simple function call. This will listen for any element with the class attribute of ‘tooltip’ and runs the main tooltipster() function which will show and hide our tooltips with default styling.

<script>
 002        
 003 $(document).ready(function() {
 004            
 005 $(‘.tooltip’).tooltipster();
 006        
 007 });
 008 </script>

Image map

Next we’ll add a graphic to our page, which will be defined as the image map. We’ve used Dreamweaver’s Design mode to enable us to draw the hotspot areas more accurately; to highlight parts we want a tooltip for. Add as many as you want and make sure you enter ALT text.

001 <img src=”mustang.png”         usemap=”mymap”/>
 002    
 003 <map name=”mymap”>
 004 <area shape=”circle” 
 coords=”428,392,38” href=”#” 
 alt=”Headlamp”/>
 005 …
 006 </map>

Class and title

Once your image map is defined and all the hotspots drawn, switch back to the code and we’ll attach the tags. Make sure class=”tooltip” is added to each area element of your map, with a title attribute containing the text you want your tooltip to display.

001 <img src=”mustang.png”         usemap=”#mymap”/>
 002 <map name=”mymap”>
 003 <area shape=”circle”         coords=”428,392,38” href=”#” 
 alt=”Headlamp” class=”tooltip” 
 004 title=”Mustang headlamps”/>
 005 …
 006 </map>

Final preview

Save and preview. As you pass the cursor over your image map you should see a tooltip appear over each hotspot, hiding once you move it away. You can use the same technique for links, <divs> or any element!

×