How to create a tooltips with jQuery

Here’s a simple idea to create a tooltips message with jQuery.

Idea…

  1. Identify the “target” that need to show the tooltips message.
  2. Create a tooltips message and CSS style for it.
  3. Three functions, – showTooltips, hideTooltips, changeTooltipsPosition.
  4. While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position with changeTooltipsPosition.
  5. While mousemove around the “target“, keep change the tooltips message position with changeTooltipsPosition.
  6. While mouseleave the “target”, use hideTooltips to hide the tooltips message.
  7. Use jQuery to do it :)

1. Target

The “hint” and “username label” are the target to show the tooltips message.


<label id="username">Username : </label><input type="text" / size="50"> 
<span id="hint">hint (mouseover me)</span>

2. Tooltips CSS

Create a CSS style for tooltips message.


.tooltip{
	margin:8px;
	padding:8px;
	border:1px solid blue;
	background-color:yellow;
	position: absolute;
	z-index: 2;
}

3. Show Tooltips

Append the tooltips message to the “body” tag, and initial the tooltips message position.


var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
     .appendTo('body');
   changeTooltipPosition(event);
};

5. Change Tooltips

Change the tooltips message position.


var changeTooltipPosition = function(event) {
	var tooltipX = event.pageX - 8;
	var tooltipY = event.pageY + 8;
	$('div.tooltip').css({top: tooltipY, left: tooltipX});
};

6. Hide Tooltips

Hide the tooltips message.


var hideTooltip = function() {
	$('div.tooltip').remove();
};

7. Bind It

Bind the mouse events to the target.


$("span#hint,label#username'").bind({
	mousemove : changeTooltipPosition,
	mouseenter : showTooltip,
	mouseleave: hideTooltip
});

Try it yourself

In this example, mouseover the hint or label to show the tooltips effect.


<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#hint{
		cursor:pointer;
	}
	.tooltip{
		margin:8px;
		padding:8px;
		border:1px solid blue;
		background-color:yellow;
		position: absolute;
		z-index: 2;
	}
</style>

</head>
 
<body>

<h1>jQuery tooltips example</h1>

<label id="username">Username : </label><input type="text" / size="50"> 
<span id="hint">hint (mouseover me)</span>

<script type="text/javascript">

$(document).ready(function() {
	
	var changeTooltipPosition = function(event) {
	  var tooltipX = event.pageX - 8;
	  var tooltipY = event.pageY + 8;
	  $('div.tooltip').css({top: tooltipY, left: tooltipX});
	};

	var showTooltip = function(event) {
	  $('div.tooltip').remove();
	  $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
            .appendTo('body');
	  changeTooltipPosition(event);
	};

	var hideTooltip = function() {
	   $('div.tooltip').remove();
	};

	$("span#hint,label#username'").bind({
	   mousemove : changeTooltipPosition,
	   mouseenter : showTooltip,
	   mouseleave: hideTooltip
	});
});

</script>
 
</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Praveen Inbasekaran
Guest
Praveen Inbasekaran

Mkyong any idea how to out tooltips for struts select and struts textfield tags that has an inbuilt label code. Am trying it but no use to bring tooltip over the textfield area nor the select area

Jaime Kam
Guest
Jaime Kam

Excelent! Very usefull.

Carlos Sousa
Guest
Carlos Sousa

Thank you very much! Work like a charm, and most importantly, very simple.

Seb
Guest
Seb
Hi, just a quick note since I came across your nice article via google: The more common jQuery notation of binding, note that I am not using the bind() function and as a super simple test I also dont use separate css definitions. Maybe its helpful for someone. Cheers $(function () { var changeTooltipPosition = function (event) { var tooltipX = event.pageX – 8; var tooltipY = event.pageY + 8; $(‘#tooltip’).css({ top: tooltipY, left: tooltipX }); }; var showTooltip = function (event) { $(‘#tooltip’).remove(); $(‘I’ am tooltips! tooltips! tooltips! :)’).appendTo(‘body’); changeTooltipPosition(event); }; var hideTooltip = function () { $(‘#tooltip’).remove(); };… Read more »
John
Guest
John

This is awesome, and a huge help! Is there a way, or another tutorial you’ve done that shows how to take this code and make it so that I can create different tooltips for several different items? It would be a huge help!

Yixing Jiang
Guest
Yixing Jiang

Copied the original code but it’s not working for me

Kuiamenh Martin
Guest
Kuiamenh Martin

Nice article. This is what i’m looking for.
Thanks sir mkyong :)

Rahul S
Guest
Rahul S

Thanks man.. It was cool..
Its really good to have for such customized tooltip div.

Hernan
Guest
Hernan

Hi,

For tooltip, I have a scenario werein I have two images with tooltip with different message. As I testing it, the message set on the first tooltip is displaying on the second tooltip. I set the message differently though I used the same tooltip class in DIV. Can you advice on how I can do this? BTW, my scenario is, aside from two tooltip with different message, each toolip message has an url/link on it.

Hoping to receieve a response as this is currently UAT issue in my side. Thanks

servane
Guest
servane

Hi, it’s very usefull but I’d like to know how to make a dynamic text in the tooltip.

Thanks

Khalid
Guest
Khalid

thanks it’s nice

The Company coupon code
Guest
The Company coupon code

Hi there just wanted to give you a quick heads up. The words in your article
seem to be running off the screen in Opera. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d
post to let you know. The design look great though!
Hope you get the issue solved soon. Thanks

SAGAR
Guest
SAGAR

Please help me in learning javascript and jquery as well as ajax from basics to advance.as i have reviwed w3schhol.please tell me another link

aswathy
Guest
aswathy

I think ‘ code school ‘ will help you . Please check this link http://try.jquery.com/

Reddy
Guest
Reddy

How can I add a sticky tooltip using your code

zack
Guest
zack

Works perfectly. Very instructive. Thank you!

Tushar Kadav
Guest
Tushar Kadav

Hi mkyong,

I like your blog its really useful and I have implemented,and its easy to understand.I like the way you are explaining.

Thanks a lot…

sainul abid
Guest
sainul abid

Very useful. Good work.

Lisa @ Hochzeit & Trauung
Guest
Lisa @ Hochzeit & Trauung

it works for me

thank you

Chandra
Guest
Chandra

This ocde is working fine in IE8 but not working in firefox. I used 1.7.2.min.js instead of 1.4.2.min.js.
Please help me in resolving this issue.

aymen
Guest
aymen

thank you so muccchh u saved my day !!! nice article

aymen
Guest
aymen

thank you soooo much it saved my day !!! nice article

Steve
Guest
Steve

Thanks for the tipp – it worked but first I had to remove the ‘ symbol
@ $(“span#hint,label#username'”).bind({

now it works, thanks!

Sam
Guest
Sam

This is really helpful information, i tried same thing as you have shown here. I am getting following exception. Can you help me ??

Webpage error details

Message: ‘guid’ is null or not an object
Line: 19
Char: 13206
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

RockMetal
Guest
RockMetal
I’m so grateful for your straightforward tooltip idea and demo. I’m adapting this to a current WordPress site but can not get it to work. It works great if I simply create an HTML page in Dreamweaver but when I insert this into WordPress it simply doesn’t work. Basically i’ve tried a few variations but got so frustrated I just took your code verbatim including the selectors and still won’t work. What i’m trying to accomplish is for the tooltip to display on any link with a class of ‘ext-link’. So, I set the .bind to $(‘a.ext-link’).bind({blahblah}. No good. Nothing… Read more »
Zamshed Farhan
Guest
Zamshed Farhan

I am not able to use this in a Struts application. Have any idea to resolve this issue.

Zamshed Farhan
Guest
Zamshed Farhan

Very basic, but very useful example.

Jason
Guest
Jason
hello, i want to do tooltip click function,because i want to distinguish it click or not click , but when i finish ,i find the tooltip’s positon is not correct,i just modify $(“span#hint,label#username'”).bind({ mousemove: changeTooltipPosition, mouseenter: showTooltip, mouseleave: hideTooltip }).click(function () { showTooltip.call(this, event); });
Robi
Guest
Robi

var showTooltip = function(event) {
$(‘div.tooltip’).remove();
$(‘:)…I\’ am tooltips! toolI\’ am tooltips! tool’)
.appendTo(‘body’);
changeTooltipPosition(event);
};

####
Im hope, that this will be correct :|

Robi
Guest
Robi

var showTooltip = function(event) {
$(‘div.tooltip’).remove();
$(‘:)…I\’ am tooltips! toolI\’ am tooltips! tool’)
.appendTo(‘body’);
changeTooltipPosition(event);
};

Robi
Guest
Robi

Hi i have problem.

I meen is, possible use PHP inside JQ
What I have to change, to make this script correct ?

##############################
// $date[date] <– is form mysql
// $user="$name $surname $date[date]";
(…)
var showTooltip = function(event) {
$('div.tooltip').remove();
$('
…some text…
‘)
.appendTo(‘body’);
changeTooltipPosition(event);
};
(…)