Create simple tooltips using CSS and jQuery

CSS tooltips are very popular in modern web design, and contrary to popular belief, they are fairly easy to create, especially with the help of various popular javascript frameworks.

Of course, you can use the standard plugin, but to make simple tooltips, you just need to write only 10 lines of jQuery and CSS code.

So let's get started. First of all, pay attention to the structure of this tooltips: this is an ordinary link that will look something like this:

<a href ="#" title=" Tooltips"></a>

Later we will use javascript to extract the title and paste it into the container:
<div class="tooltip">
<p> Tooltips</p>
</div>

The CSS for our tooltips will look something like this:

.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}
.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}

* This source code was highlighted with Source Code Highlighter .

Position must be absolute in order for Javascript to set the top and left property for the div to be placed next to our mouse cursor. For now we set the property left = -9999px. The rest of the CSS is for visual design only.
')

Create jQuery Tooltips: The jQuery code is short and simple:

Take a look at the whole script, then I will explain in order what for what.

function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
var my_tooltip = $( "#" +name+i);

$( this ).removeAttr( "title" ).mouseover( function (){
my_tooltip.css({opacity:0.8, display: "none" }).fadeIn(400);
}).mousemove( function (kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout( function (){
my_tooltip.fadeOut(400);
});
});
}
$( document ).ready( function (){
simple_tooltip( "a" , "tooltip" );
});

* This source code was highlighted with Source Code Highlighter .

It may look complicated, especially if you are not familiar with jQuery, but in fact everything is quite simple. First of all, we create a function:

function simple_tooltip(target_items, name){
}


↑ target_items is a variable that we define by calling the script. For example: to add tooltips to all links in the #maincontent block, enter “#maincontent a”. Name defines the css class that we apply to our tooltip. We use variables here to make the script flexible so you can add different tooltips with different styles.

function simple_tooltip(target_items, name){
$(target_items).each( function (i){
// generates code for each tooltip
});
}


Here we generate code for each item that will be found by our script. The variable i that we pass to the function will be automatically incremented by jQuery after each iteration. In this way we will be able to give each tooltips a unique ID.

function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
});
}


↑ This fragment creates html-code for each tooltip. They all get the same class, but different IDs. Title is added between p tags.

function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );

var my_tooltip = $( "#" +name+i);

});
}


This line selects the tooltip and saves it in a variable for future use.

function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
var my_tooltip = $( "#" +name+i);

$( this ).removeAttr( "title" ).mouseover( function (){
}).mousemove( function (kmouse){
}).mouseout( function (){
});

});
}


↑ This is the basic design of our functions. First of all, we select the current link $ (this). Then we delete the title attribute, since we don’t want the “normal” tooltip to appear, which shows each browser, when you hover the mouse over the link.

Then we call 3 functions:

• The mouseover is called when we first point to the link;
• The mousemove is called when we move the mouse over the link;
• The mouseout is called when the mouse “leaves” the link.

As you can see, we pass the parameter to mousemove, this parameter is very important, since it stores the position of the mouse cursor.

$( this ).removeAttr( "title" ).mouseover( function (){
my_tooltip.css({opacity:0.8, display: "none" }).fadeIn(400);
}).mousemove( function (kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout( function (){
my_tooltip.fadeOut(400);
});

* This source code was highlighted with Source Code Highlighter .

Now we define what will happen when various functions are called:
On mouseover, we set some css values ​​for the tooltip: we define the transparency and set display: none.
On the mousemove, we set the values ​​for top and left to place the tooltip next to the cursor. X and Y coordinates are called via .pageX and .pageY. We also add a small offset of 15 px so that the tooltip is not directly under the cursor.
On mouseout, we simply call the fadeOut () function to hide the tooltip.

$( document ).ready( function (){
simple_tooltip( "a" , "tooltip" );
});


↑ The last thing we do is call up the script as soon as the document is loaded. As mentioned earlier, the first parameter is the selector, and the second parameter is the classname of our tooltip. So you can create different designs for different tooltips.

And this is the result of our work (See at the bottom of the page and when you hover over the picture at the top of the page)