Tutorials

Create a Simple CSS + Javascript Tooltip with jQuery

Written by Kevin Liew on 17 Mar 2009
171,968 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
Will 10 years ago
It's Very Cool ! But i Have Other type of ToolTip, The ToolTip Ballons !
Reply
Gribby 10 years ago
Oh, guys! I found it, buddy absolutely correct says, that when positioning relative tip floats away at right-bottom corner, and solution is use $("html").append… but it still not work in IE! )) Correct is use $("body").append. Cheers
Reply
anker 8 years ago
Thank you so much! Now I can finaly use this tooltip on my site
Reply
Barry 8 years ago
or you can just live$(this).append... as it is, but prepand it with the line: $(this).css('position', 'relative');
Reply
Girish 10 years ago
Hi,
Great work dude. I want to make some customization for that I need http://code.jquery.com/jquery-latest.js file. Can u please send it to my email id i.e. girishpalmah@gmail.com

Thanks
Reply
Elijah 9 years ago
Thanks for your post! but not working in google chorme
Reply
Pete 9 years ago
The demonstration looks cool. Is there a way to implement this to wordpress? The plugins I found are no cool.
Reply
girl 9 years ago
Very cool. Thank you so much!!!1
Reply
Balazs Gyorfi 9 years ago
How can I put an EMBED video in this tooltip?

Thank you,
Balazs
Reply
Kevin Liew Admin 9 years ago
hmm, embed video, I don't think you can, but you can try to put the html embed code in the title of A tag.
Reply
fask 9 years ago
hello and thanks for sharing, but if I want to create a js file rather than enter the code before the closing tag of the head as you do?
Reply
Kevin Liew Admin 9 years ago
Yes you can. You just have to take everything in between <script> .... </script> and put it in a js file. After that, link it with <script type="text/javascript" src="filename.js"></script>
Reply
Damnjan 9 years ago
Very nice and useful script :) tnx
Reply
dirk 9 years ago
It also runs with the img tag?
thanks
Reply
shantanu 9 years ago
Hi Guys, i have problem with tooltip, can some help me ,

i want a tooltip on when i drag and select a paragraph text the tooltip comes in center of the selected text. please help me i am really fade up of this.

help! help! help!
Reply
Kevin Liew Admin 9 years ago
Unfortunately, this tooltip script won't be able to do that. It would be kinda hard to make one as well, because you can't really detect the dimension and position of your selected text.
Reply
venkat 9 years ago
how to implement it for select box items, means we can help to select the user one among the list items.( for each select item one specific properties will be given on mouse over.) How to implement it for that?
Reply
Kevin Liew Admin 9 years ago
I dont think that effect can be done with the default select box. I guess you need a custom css based select box, and then apply the tooltips to each of the item.
Reply
Jay 9 years ago
I've updated your coding for css3, It's a bit ugly, but, Cheers! no more images! :)

#tooltip .tipHeader {
height:8px;
-moz-border-radius-topleft: 75px;
border-top-left-radius: 75px;
-moz-border-radius-topright: 75px;
border-top-right-radius: 75px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
background:#333;
}


#tooltip .tipBody {
background-color:#000;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
background:#333;
padding:5px;
}

#tooltip .tipFooter {
height:8px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 75px;
border-bottom-left-radius: 75px;
-moz-border-radius-bottomright: 75px;
border-bottom-right-radius: 75px;
background:#333;
}
Reply
fabio 8 years ago
great solution; even you can use just the .tipBody with more padding.
Reply