How to create a tooltips with jQuery
Here’s a simple idea to create a tooltips message with jQuery.
Idea…
- Identify the “target” that need to show the tooltips message.
- Create a tooltips message and CSS style for it.
- Three functions, – showTooltips, hideTooltips, changeTooltipsPosition.
- While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position with changeTooltipsPosition.
- While mousemove around the “target“, keep change the tooltips message position with changeTooltipsPosition.
- While mouseleave the “target”, use hideTooltips to hide the tooltips message.
- 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>
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
Hi, Thank you for the tips
Excelent! Very usefull.
Thank you very much! Work like a charm, and most importantly, very simple.
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
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!
Copied the original code but it’s not working for me
Nice article. This is what i’m looking for.
Thanks sir mkyong 🙂
Thanks man.. It was cool..
Its really good to have for such customized tooltip div.
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
Hi, it’s very usefull but I’d like to know how to make a dynamic text in the tooltip.
Thanks
thanks it’s nice
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
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
I think ‘ code school ‘ will help you . Please check this link http://try.jquery.com/
How can I add a sticky tooltip using your code
Works perfectly. Very instructive. Thank you!
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…
Very useful. Good work.
it works for me
thank you
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.
thank you so muccchh u saved my day !!! nice article
thank you soooo much it saved my day !!! nice article
Thanks for the tipp – it worked but first I had to remove the ‘ symbol
@ $(“span#hint,label#username'”).bind({
now it works, thanks!
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
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!
Make sure jQuery is working in your WordPress – Just output a simple message via jQuery, see if it works?
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/
Visited your http://www.simcomedia.com/handbook/, the tooltips are working fine?
Put this in a simple test html, to test if it works? Then comment line by line (other plugins or stuffs that you feel may be a stopper) in your production site to identify where it go wrong.
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.
I am not able to use this in a Struts application. Have any idea to resolve this issue.
Just a JavaScript, just out it, dun need special integration.
Very basic, but very useful example.
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);
});
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 😐
var showTooltip = function(event) {
$(‘div.tooltip’).remove();
$(‘🙂…I\’ am tooltips! toolI\’ am tooltips! tool’)
.appendTo(‘body’);
changeTooltipPosition(event);
};