How To Create a Simple Tooltip Using CSS and jQuery

Tooltips are a great way to create context for users, especially when they require some more information. Tooltips are actually very easy to make, and can greatly help to provide information on your site. In this tutorial, I will go through the process of creating a very simple, and easy-to-use tooltip that you can apply to (almost*) any element on your website.

First, let’s start with the basic HTML structure of a webpage along with several elements to test our tooltip script.

HTML

[HTML]
< !DOCTYPE html>
< !DOCTYPE html>

[/HTML]

You’ll notice that I applied a class of tooltip to certain HTML elements that I want to have a tooltip applied to. I’ve also included a data-tooltip="" attribute to those elements which we will use to extract the actual text to show inside the tooltip. I’ll explain how we will use this in the next couple of steps.

jQuery

[JAVASCRIPT]
$(document).ready(function(){

// tooltips
$(‘.tooltip’).hover(function(){ //on hover
var tooltip = $(this).data(‘tooltip’); //grab the data content from the element
$(this).append(‘‘+tooltip+’‘); //show the data content
}, function(){
$(this).find(‘.tooltip-note’).detach(); // remove the data content
});

});
[/JAVASCRIPT]

You’ll notice that this is a very simple and easy-to-use jQuery script. All I’m doing is making it so that when a user hover’s over any element with a class of tooltip, then I’ll grab the value inside of the data-tooltip and put it in a span class='tooltip-note' element, which we will style with CSS below. Sounds confusing, but actually very simple.

Lastly, we’ll need to add some CSS to show the tooltip properly.

CSS

[CSS]
/*– Basic Styling–*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #687991;
color: #333333;
font-size: 100%;
font-family: “Helvetica Neue”, “Helvetica”, arial, sans-serif;
}
.content{
width: 1000px;
margin: 40px auto;
}

/*– Tooltip Styling –*/

.tooltip {
position: relative;
}
.tooltip .tooltip-note {
display: inline-block;
position: absolute;
top: -30px;
left: -10px;
height: 22px;
padding: 2px 4px;
font-size: 1em;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.tooltip .tooltip-note:before { /* Create a triangle arrow at the bottom of the tooltip bubble */
content: ” “;
display: block;
position: absolute;
top: 22px;
left: 40%;
z-index: 1;
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: 7px;
border-top-color: white;
}
[/CSS]

Here’s a preview of how the tooltip will look like.
Image may be NSFW.
Clik here to view.

Please note: This won’t work on all HTML elements, especially with elements that are self closed (i.e. input fields, etc.). You can, however, wrap those elements in a div or span tags and apply the tooltip class along with the data-tooltip to that wrap instead.

Conclusion

As you can see, it is very easy to add a simple tooltip to most HTML elements and allow you to show more useful information on your website.

Download the Files

how-to-create-a-simple-tooltip-using-css-and-jquery

If you like this tutorial and want to see more or if you think this is useful to you, let me know in the comments below.