Create a Simple CSS + Javascript Tooltip with jQuery

Written by Kevin Liew on 17 Mar 2009
198,518 Views • Tutorials

It's always a joy to understand how things work. Well, at least I do. Alright, this time, I want to share with you all, how to create a simple jQuery tooltip. In this website, I'm using a script I grabed it online, and it uses onmouseover and onmouseout. It's really messy and annoying me. So, it's jQuery comes to rescue. The way it works is fairly simple, I use the Anchor tag REL and TITLE attributes to identify a tooltip and its content.

By the way, if you are having problems looking for a good iPage Web Host, you can use this website to guide you: Web Hosting Review

Getting the mouse X and Y axis

First of all, I did a search with google, and I found this little script from this blog, very useful information. It shows me the idea how to retrieve the X and Y Axis coordinate.

$(document).ready(function()
 {
  $().mousemove(function(e)
   {
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
});

 

Detect the Anchor element

I wrote a simple selector to select only Anchor tag with REL set to tooltip, I'm using the same approach in the Navigation List menu + jQuery Animate Effect tutorial. It's very straight forward and easy.

	$('a[rel=tooltip]').mouseover(function() {
		......
	});
As a result, anchor tags that support this simple jQuery tooltip should look like this
	<a rel="tooltip" title="Testing of tooltip">sentences</a>

 

Trick to hide the TITLE Attribute's Tooltip in browser

Okay, there is one major issue we need to sort it out - The native tooltip in Mozilla browsers. If you're using TITLE attribute in Anchor tag, on mouse over, a small yellow tooltip will appear, we want to avoid that. So, a simple solution, on mouse over, we will grab the value in the TITLE attribute, then, remove its value. While on mouse out, we'll put it back on. : ) simple and easy. You'll able to see this in the final code.

 

 

CSS

Finally, the CSS. I try to make the tooltip easy to reskin, you can customize the tooltip in this section. The structure of tooltip it made up with 3 sections - header, body and footer. It will be very easy for you to create your own skin.

#tooltip {
	position:absolute;
	z-index:9999;
	color:#fff;
	font-size:10px;
	width:180px;	
}

#tooltip .tipHeader {
	height:8px;
	background:url(images/tipHeader.gif) no-repeat;
}

/* IE hack */
*html #tooltip .tipHeader {margin-bottom:-6px;}

#tooltip .tipBody {
	background-color:#000;
	padding:5px 5px 5px 15px;
}

#tooltip .tipFooter {
	height:8px;
	background:url(images/tipFooter.gif) no-repeat;
}

 

Final Product

Basically, that's it. Just combine al the techniques together, and you have just learned how to create a simple jQuery tooltip! You can look at the demo or download it and start playing with it.

Demonstration Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Tooltips turtorial</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Select all anchor tag with rel set to tooltip
	$('a[rel=tooltip]').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('title');	
		
		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
		
		//Append the tooltip template and its value
		$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');		
		
		//Set the X and Y axis of the tooltip
		$('#tooltip').css('top', e.pageY + 10 );
		$('#tooltip').css('left', e.pageX + 20 );
		
		//Show the tooltip with faceIn effect
		$('#tooltip').fadeIn('500');
		$('#tooltip').fadeTo('10',0.8);
		
	}).mousemove(function(e) {
	
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		$('#tooltip').css('top', e.pageY + 10 );
		$('#tooltip').css('left', e.pageX + 20 );
		
	}).mouseout(function() {
	
		//Put back the title attribute's value
		$(this).attr('title',$('.tipBody').html());
	
		//Remove the appended tooltip template
		$(this).children('div#tooltip').remove();
		
	});

});

</script>

<style>
body {font-family:arial;font-size:12px;text-align:center;}
div#paragraph {width:300px;margin:0 auto;text-align:left}
a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
a:hover {color:#000;text-decoration:none;}

/* Tooltip */

#tooltip {
	position:absolute;
	z-index:9999;
	color:#fff;
	font-size:10px;
	width:180px;
	
}

#tooltip .tipHeader {
	height:8px;
	background:url(images/tipHeader.gif) no-repeat;
}

/* IE hack */
*html #tooltip .tipHeader {margin-bottom:-6px;}

#tooltip .tipBody {
	background-color:#000;
	padding:5px;
}

#tooltip .tipFooter {
	height:8px;
	background:url(images/tipFooter.gif) no-repeat;
}

</style>

</head>

<body>

<div id="paragraph">
A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each <a rel="tooltip" title="A paragraph typically consists of a unifying main point, thought, or idea accompanied by <b>supporting details</b>">paragraph</a> builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end. A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many <a rel="tooltip" title="Testing of Sentences">sentences</a>. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.
</div>

</body>
</html>
Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

78 comments
Rob Admin 12 years ago
Nice tooltip, here is one I created myself as a jQuery plugin: http://www.websanova.com/plugins/websanova/tooltip
Reply
Max Chadwick 12 years ago
This is a great and simple solution for creating customizable tool tips that I might just have to use in a project I'm working on. Just wanted to point out that the fade in effect doesn't work in your code because you haven't set display:none for #tooltip in your css. Otherwise, great code. Also cheers to Jay for posting an all CSS solution to adding rounded corners.
Reply
guest 12 years ago
Quite impressive, the trouble a guy has to go through just to keep a little title attribute alive with onmouseover/onmouseout. Really really easy would be sth like this: onmouseover="this.title='Computers help to frustrate people'" onmouseout="this.title=''", wherest the onmouseover keeps the title-attribute active as long as the onmouseover occurs. It would make the title-attribute a lot more attractive in case you want to put more info in it. Long complicated scripts for simple attributes are over the edge for me. Sorry.
Reply
AM 12 years ago
Bullseye! Nice.

I made a few changes though:
On IE, the box would flash on the left side of the screen, then get updated. This is because you don't set the X & Y when you first fade in. This does the trick:
Change:
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.9);
To:
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.9);
and bam.
Also look for the comment by me earlier. It "solves" the problem of the tooltip coming up as undefined.
Reply
Dru 12 years ago
This is really great! :-) Thank you!!! It works magnificently!
Reply
GeoAvila 12 years ago
the offset works better for me. thnx.

//Select all anchor tag with rel set to tooltip
$('a[rel=tooltip]').mouseover(function(e) {

//Grab the title attribute's value and assign it to a variable
var tip = $(this).attr('title');

//Remove the title attribute's to avoid the native tooltip from the browser
$(this).attr('title','');

//Append the tooltip template and its value
$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');

//Show the tooltip with faceIn effect
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.9);

}).mousemove(function(e) {

//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
$('#tooltip').css('top', e.pageY - (parseInt(jQuery(this).offset().top)-25));
$('#tooltip').css('left', e.pageX - (parseInt(jQuery(this).offset().left)-25));

}).mouseout(function() {

//Put back the title attribute's value
$(this).attr('title',$('.tipBody').html());

//Remove the appended tooltip template
$(this).children('div#tooltip').remove();

});

Reply
paolo 12 years ago
Hi,
I'm trying to implement this on a multiple select, is this possible?
<select multiple id="select1">
<option>Option 1</option>
<option>Option 2</option>
<option >Option 3</option>
</select>

Thanks,
Paolo
Reply
amko 12 years ago
Great plugin! I'm having an issue though. I have my link wrapped in a div with position:relative and it's moving the tooltip really far from the trigger point. Any suggestions?
Reply
Kevin Liew Admin 12 years ago
Ok, i got what you mean, something i've overlooked. Try to change line 21 in the javascript:
$(this).append to $(body).append
Reply
Michael Helwig 12 years ago
Thanks for the code. When modifying it according to your comment I also had to change line 43 from
$(this).children( ...
to
$(body).children( ...
to remove the tooltip properly on fade out.
Reply
Shawn Christenson 11 years ago
I found an even better way around this, which was to replace $(this).append and $(this).children with $('#div_id_its_inside').append
Reply
Webmaster, fr 12 years ago
Thanks. But it's not working with area maps.
$('map').mouseover(function(e) { = WORKING
$('area').mouseover(function(e) { = NOT WORKING

If anyone could help ?
Thanks
Reply
Joya 12 years ago
It's cool. However it works abnormally in IE(competibility views) when you quickly move your mouse pointer over the anchor words back and forth.
Reply
ramkumar 12 years ago
Not working in ie svg.
Reply
Ramesh 12 years ago
thanks,its very useful for me
Reply
Jason S 12 years ago
Thank you for sharing your code. I'm having a problem with the positioning however. My <a> is inside a table cell. I've tried making the cell and the table itself position: relative, but nothing works. The tooltip appears down and right of the anchor. What am I missing?
Reply
Kevin Liew Admin 12 years ago
You can try to adjust the position manually by adding margin to #tootip
Reply
Jason S 12 years ago
I've added the following code to #tooltip: margin: -250px 0 0 -100px; and it's much closer to where it should be. The distance is still off between Firefox, IE7, and Chrome. Any other ideas?
Reply