Create a Simple CSS + Javascript Tooltip with jQuery

Create a Simple CSS + Javascript Tooltip with jQuery


Create a Simple CSS + Javascript Tooltip with jQuery

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>

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

77 comments

Joya
Sun, 17th June 2012
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
Thu, 12th July 2012
Not working in ie svg.
Reply
Ramesh
Tue, 21st August 2012
thanks,its very useful for me Reply
Jason S
Sun, 2nd September 2012
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
Mon, 3rd September 2012
You can try to adjust the position manually by adding margin to #tootip Reply
Jason S
Fri, 14th September 2012
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
Kundan
Wed, 20th February 2013
thanks for sharing .it very useful to me. Reply
Michael
Fri, 5th April 2013
Is it possible to put a link or AJAX call in the tooltip script? I would like to use the tooltip to display data from a database. Thanks and great, great, script! I love the simplicity and ease of use. Reply
Kevin Admin
Fri, 5th April 2013
Hi Michael, unfortunately, no... but if you want something like that, you can use: http://craigsworks.com/projects/qtip2/ Reply
lukasaa
Tue, 16th July 2013
very helpful, I'm an absolute beginner in JavaScript, but it was comprehensive even for me! Very clear and brief coding. The comments in the code veeery useful as well!
Simply great!

Thanx a lot Reply
Mohd Navaid
Tue, 23rd July 2013
Hi,

Thanks for the script but I am having problem in IE, it seems $(this).append is not working in IE8.
Please help me with this.

Thanks in advance Reply
sabeel
Tue, 10th December 2013
Itn't working for me. Please help

'<a rel="tooltip" title="Testing odd"><img src=' + '"@Url.Content("~/Images/info.png")"' + 'id="imginfo_license" alt="" /></a> Reply
Dennis
Mon, 31st March 2014
Hey guys really superb sharing i would like your blog visit again. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement