Main Tutorials

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 Author

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

Comments

Subscribe
Notify of
38 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Praveen Inbasekaran
8 years ago

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

Ikhsan Kamil
2 years ago

Hi, Thank you for the tips

Jaime Kam
8 years ago

Excelent! Very usefull.

Carlos Sousa
9 years ago

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

Seb
9 years ago

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();
};

$(‘#testbutton’).button().mouseenter(function (evt) { showTooltip(evt) }).mousemove(function (evt) { changeTooltipPosition(evt) }).mouseleave(function (evt) { hideTooltip(evt) });
});

test me

John
9 years ago

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
10 years ago

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

Kuiamenh Martin
10 years ago

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

Rahul S
10 years ago

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

Hernan
10 years ago

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
10 years ago

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

Thanks

Khalid
10 years ago

thanks it’s nice

The Company coupon code
10 years ago

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
11 years ago

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
11 years ago
Reply to  SAGAR

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

Reddy
11 years ago

How can I add a sticky tooltip using your code

zack
11 years ago

Works perfectly. Very instructive. Thank you!

Tushar Kadav
11 years ago

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
11 years ago

Very useful. Good work.

Lisa @ Hochzeit & Trauung
11 years ago

it works for me

thank you

Chandra
11 years ago

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
11 years ago

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

aymen
11 years ago

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

Steve
12 years ago

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

now it works, thanks!

Sam
12 years ago

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
12 years ago

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 displays. So, I created a span called ‘hint’ (like your example), no good. Won’t display. Basically nothing works. I even tried binding it to any hyperlink with no luck. Either i’m missing something or there’s possibly a conflict with a plugin. The rest of your code is identical to your example.

I’ve tried deactivating a few plugins that i’ve known to cause conflicts but still nothing. Is there anything special I need to know to make this work in a WordPress environment? Thanks in advance!

RockMetal
12 years ago
Reply to  mkyong

Hey, thanks for your response. I did run a test and JQuery is working. Basically, aside from the test, there’s a bunch of other JQuery stuff going on as well (lightbox, slider, etc.). That’s what’s baffling me. I can’t see any reason why this won’t fire in the blog. I’m using this code:

$(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();

$(‘Clicking this link will exit this site.’)

.appendTo(‘body’);

changeTooltipPosition(event);

};

var hideTooltip = function() {

$(‘div.tooltip’).remove();

};

$(‘a[href*=http’).bind({

mousemove : changeTooltipPosition,

mouseenter : showTooltip,

mouseleave: hideTooltip

});

});

Here’s the url if you want to take a look at the source code: http://www.simcomedia.com/handbook/

RockMetal
12 years ago
Reply to  mkyong

I did do that already. I have the same code in an html file at http://www.simcomedia.com/tooltips-demo.html and it works perfectly. It may be that i’m just not inserting this into the proper location in WordPress? I’ve inserted it into the header.php just before the tag.

Also, i’ve tried several selectors including any/all elements to trigger it, and even created a special paragraph and span elements trying to trigger it. But, no matter what I do in WordPress it doesn’t display the tooltips.

I’m wondering If I need to make this into a plugin? I’ve had no problems in the past with integrating some jquery stuff before. Something is missing and I can’t point it out.

Zamshed Farhan
12 years ago

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

Zamshed Farhan
12 years ago

Very basic, but very useful example.

Jason
13 years ago

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
13 years ago

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
13 years ago

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