Tutorials

Create a Simple CSS + Javascript Tooltip with jQuery

Written by Kevin Liew on 17 Mar 2009
167,867 Views • Shares
78 comments

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
George 10 years ago
Like it ... you need to fix it for IE6, also in Firefox if you have Google toolbar instaled with Translate/Enable word translation a small yellow tooltip is there.
Reply
kevin Admin 10 years ago
Hi George, I have fixed the IE issue, will look into google toolbar later on... cheers
Reply
Alexandre Broggio 10 years ago
Cool
Reply
adam a 10 years ago
can you help me adjust the transparency effect of the tooltip? i cant seem to spot the code that is creating the effect. excuse my noobness please.
Reply
adam a 10 years ago
nevermind found it. fadeTo()
Reply
Andy D 10 years ago
Great read.... WOndered if you could offer advice? I'd like to have a sort of tool tip thing on an image, so that when the cursor is over the top of a particular part of the image, say a house, then there would be a tooltip window with a description of the property, and url or something else. Could this be done in this instance?
Reply
hirakumar 10 years ago
Actually, I want to show tooltip while I focus on input text field . So, I change javascript into $('input[type=text]').focus(function(e) { ---} but does not show any tooltip , Even I set title and type attribute in" input" html tag. Is there any solution for this tool tip in input box
Reply
buddy 10 years ago
I had to use:
$("html").append..
and $("html").children('div#tooltip').remove();
because usage of 'position:relative' container makes tooltip float away
Reply
Fandi gala 10 years ago
Memang diperlukan konsep
Reply
engin 10 years ago
Thanks for this tutorial!
Reply
Robbiegod 10 years ago
When i add padding to style .tipBody, when i hover my link i am seeing a small dark rectangle (same width as the tooltip box and same color). Its like it is making two boxes appears. How can i get the other box to go away. I need padding in the tip too.
Reply
Zander 10 years ago
I am using part of your code and am having a similar problem to buddy above. My main page container needs to have relative positioning, because of this, the tooltip is floating away. What is the way around this?
Reply
Gilmar Lopes 10 years ago
I put this script in my project but the internal div not show the tooltip!
Reply