Click to toggle dark text on white

wTooltip Discussion, Feedback

Download: Uncompressed Version | Compressed Version

  1. Main Page
  2. Advanced Examples
  3. Index of All Options
  4. Comments or Questions

Post Feedback and Comments Below Click here to leave comment

Abel Mohler
2009 May 18th, 13:09

I sometimes receive suggestions, feedback, or questions through my regular contact form, and thought it would be nice to have one place for this activity. If you post a website it will be linked to with your name as anchor text, but there will be a nofollow attribute. Emails will not be published, they are only for my personal use, and are not required.

2009 June 8th, 19:28

Is there a way to remove tooltip functionality from an element after it has been applied?

Paul Fazz
2009 June 9th, 4:50

Tooltip appears to have race condition. Moving mouse quickly over/away from target causes tooltip to remain.

Abel Mohler
2009 June 10th, 18:53

will unbind the tooltip action from any element.

It turns out I said this in haste. I am working on a solution.

@Paul Fazz:
This is something I have tested extensively and I am not aware of conditions that will cause what you are describing. Do you have a test page that you are able to reproduce this on? Are you sure you are using the latest version of the tooltip?

2009 July 14th, 22:28

Can it be modified so it will respont to a onclick event?

2009 July 17th, 0:12

Good and simple script. but one question though....
if it would pick the title of the A tag by would have been more easier to work with

Abel Mohler
2009 July 18th, 14:36

yes, there is a click callback, which has access to the node which is being hovered over, and the tooltip. It works like this:

clickAction: function(tooltip, node) {
//custom code here

Note that by default, this callback hides the tooltip, so if you override it, that action may no longer be taken.

not sure what you mean. At default settings, wTooltip will use the title attribute of whatever element set you are targeting to fill the tooltip.

2009 July 19th, 16:44

works great however how do I set the padding for the tooltip? The default tooltip is too big

Abel Mohler
2009 July 20th, 14:38

read the documentation. You can style the tooltip through the style object. Or, you could set an ID or a className, then style it from the stylesheet.

Michael Updegraff
2009 August 19th, 9:13

Abel, thank you - nice snappy plugin. If wtooltip() is attached to an , is there the ability to return false in case the user clicks the as well as mousing over? Or would I unbind()?

Abel Mohler
2009 August 20th, 10:12

If I understand your question correctly, you want to control the click of the element that activates the tooltip.

If this is the case, then yes, there is a click callback. By default, it hides the tooltip. It could be modified like this:

clickAction: function(tooltip, node) {
return false;

2009 August 25th, 7:35

How can I change the position of the tip? I want it above my mouse cursor.

2009 August 26th, 4:07

I have a problem with ie7 and the style element width! How can i use the style in ie?

thanks for the help!

2009 August 27th, 17:29

Excellent little plugin here. Great commenting in your .js file too, very easy to update. Now just need to get my PHP info exported into javascript to take advantage of this in my WP blog! Thanks for this!!!

Abel Mohler
2009 August 30th, 13:34

Check out the offsetX and offsetY options, this will allow you to change the position however you like.

I suggest you set an ID to the tooltip (check documentation), then do some conditional comments in the head of your document to send needed fixes to IE7 and below.

2009 September 6th, 2:53

Is it possible to disable the tooltip in the callBefore function?

Abel Mohler
2009 September 8th, 10:05

It's not super easy, but you could configure the tooltip to not be automatically shown when the element is hovered (see "auto" option in "all options page"). Then, you could manually display the tooltip in the callBefore function, based on whatever conditions you like (set the display to "block" to show the tooltip).

2009 September 9th, 17:13

Is it possible to have the tooltip popup in a fixed location relative to the triggering element, rather than relative to the mouse position?

Abel Mohler
2009 September 10th, 8:05

There is no design feature in the tooltip that allows that, though I may add something like that in the future. If you want fixed tooltips, I recommend Qtip:

2009 September 16th, 5:59

Helo! I've found some strange behaviours:

1) default styles (border, color and so on) are applied even if i set className property;

2) Code 'if (! && typeof != "object")'...
Shouldn't it be 'if ( && typeof != "object")' expression?

3) Some times i get situation then "title" property is removed from tag permanently - i just need to move mouse over tag, wait a moment and then move out cursor from tag and repeat it again quickly. I suggest that script copy title property, then remove it from tag and then mouse over event fires again and script copy title again but title still empty..

2009 September 16th, 6:01

Sorry for this wall-of-text - server script has replaced "
" to "rn" :(

2009 September 16th, 7:46


I really like your plugin and it works great, but I think it's a bit weird, that if I use ajax option, then ajax call is made on page load not on mouseover event. If I have large amount of tooltips with content generated by ajax and each tooltip content generation involves sql queries, then it all ends up with many unnecessary http requests and sql queries even if user does not mouseover tooltip elements.

So I took this IF block:
if (o.ajax) { ...

And moved it in _execute function right after if (talk) o = $.listen(o);

Maybe you could consider add an option which allows user to choose which behaviour he wants.

Thanks & keep up good work ;)

Abel Mohler
2009 September 16th, 15:35

Good suggestion. I've known for a while the the AJAX functionality needs to be improved. I'd also like to see an option for a recurring query. Every time there is a mouseover event new content could be looked for...

Look for improvements in the future. I'm also going to improve the event chain, create better positioning options, and better document the $.talk() plugin.

Oops! You're absolutely right. I hacked together my own comments thread script because I want to have my own comments module for production projects, and made a change to it recently....

Abel Mohler
2009 September 16th, 15:51

Didn't address your original suggestion. That is a good idea, I'll do something very similar to what you're suggesting. Although the behavior you're describing has never happened to one of my sites, I can see how it might if there is a lot of memory being used or a lot happening on a page. I'll write the content of the title as an special property of the node being hovered over, then just delete the title. Thanks!

Steve Owen
2009 September 19th, 9:38

Hi there. We've been trying this out and I think it's great. But with a page of images using wtooltip, if I quickly move from one img tag to the next, the second 'loses' it's tooltip (without ever showing it) and the first one gets the second's tooltip content. This is only fixed by a page refresh. If I move out of the first image so that the tooltip is removed, and then move in to the second it's fine. I use delay 200, fadeIn 200 and fadeOut 100.

I'm testing this out on a private MVC project, but I can repeat it if I save the page out to HTML. Please let me know if I can send you a copy of the page for testing.

2009 September 21st, 17:15

How would I get this tooltip to show the contents of a hidden div?

I want to show more than just a text string in the tooltip.

Steve Owen
2009 October 1st, 9:08

Just to reply to my own comment, I spoke to the author about this, and there's a workaround until a fix is incorporated. Create a temp variable to hold the title text, blank the title, then set the content of the tooltip to be the temp variable. Eg:
$(function() {
$('img[title]').each(function() {
var tooltipContent = $(this).attr('title');
$(this).attr('title', '');
{ content: tooltipContent, delay: 200, fadeIn: 200, fadeOut: 100});

2009 October 2nd, 13:17

I think this is almost what I need, it's awesome! I just don't know if I can control it, because I'm not an advanced coder. Having problems getting it to work with button rollovers (MM_swapImage) - wondering if anyone else has this working with rollovers;

AND - if it's possible to control the placement of the tooltip using Absolute Positioning. I tried adding a 'class' to the .js file (and styles in my .css) and also tried adding the css directly to the .js file, but it's not working.

Awesome script though, thank you! :)

2009 October 16th, 18:51

I'm experiencing the same behavior as Lews (16 Sept) - external styling has no effect - the tooltip simply uses the default styling no matter if I use an id or class.

I can get by using the style option but would prefer to style externally.

Great plugin - I'll be using it quite a bit on a few sites I manage.


Abel Mohler
2009 October 28th, 6:22

@Steve Owen:

I've updated the script, and think it is fixed completely for this error. I'm going to announce an update on the plugins main site, and await feedback.

Abel Mohler
2009 October 28th, 6:26


In regards to styling externally, you can set the style option to false, and it will remove all of the inline styles. Sorry if this isn't documented. You can also override any inline styles with the !important tag in your CSS document.

2009 November 8th, 23:53

I have set the content property of the tooltip to false. In firefox, the tooltip is showing the title attribute of my span element, whereas in IE 7, it shows both title and tooltip DIV. At first the tooltip shows the correct value and then it shows null. What could be the reason?

Here's my code

content: false,
className: "tooltip",
style: false//remove all pre-set inline styles

Ziaul Hasan
2009 November 10th, 17:10


The tooltip doesn't show vertically correct in IE8. It doesn't follow mouse perfectly. Its position changes when scrolling the window. Please any solution will be highly appreciated.


2009 November 12th, 13:36


I have the same problem as Ziaul, can you help?


2009 November 12th, 13:53

PS: Forgot to say, it works fine in IE8 compatibility mode.

2009 November 14th, 10:09

How can i insert this style in the wtooltip.js (in the default style rules of the tooltip):

-moz-border-radius: 5px;

Thanks for help

2009 November 19th, 5:29

Fixed it in the end all to do with W3C compliance.

2009 December 14th, 16:07

Same problem as Asho on IE7 :

"In firefox, the tooltip is showing the title attribute of my span element, whereas in IE 7, it shows both title and tooltip DIV. At first the tooltip shows the correct value and then it shows null."

2009 December 28th, 17:23

To all those battling the IE null issue, here is the fix.

Look for all instances of title = null; and change to title = "".

IE interprets the null as a literal, hence you see "null" and the original title text "null". If you set it to an empty string IE will ignore it and wToolTip can then display what it holds in TitleMem.

This change will not affect display in any other browser.

Hope you all had a Merry Christmas and have a Happy New Year!

2010 January 6th, 4:12

I like wTooltip but I wonder if it can use graphic images for the title attribute as qTip does. See my absurd, yet flaccid, web site for flyover examples. qTip.js is about 2.6k, but it is no longer maintained.

Abel Mohler
2010 February 22nd, 9:09

Thanks for this fix. I've implemented it in the latest version. Sorry to everyone that's been dealing with this bug. Been extremely busy lately and didn't have a lot of time to check in on this.

You can put any amount of HTML in the title attribute as you like. If you want it to validate, escape it using RFC 1738 URL encoding. This is the encoding that most closely matches JavaScript's unescape() function, which wTooltip uses to filter content before it is placed into the tooltip. If you use PHP like I do, you can do RFC 1738 encoding with the rawurlencode() function.

2010 March 6th, 3:39

There is an issue with the tooltip that can be seen at

The left side tooltip is fine but the right side one needs a width to be displayed inside the screen and not off its right.

The default with is 1*2 + 10*2 = 22px

When using this unrealistic width to check if the tooltip left is greater than the maxLeft we get a false. Of course. And the tooltip is displayed off the screen on its rigth.
See line 206 in wtooltip.js

This is why a sensible tooltip width is required to work around this issue.

So a css style property of width: "400px" solved the issue.

I also added the same width property to the wtooltip.js file to see if it worked too. And it does.

I left the following comment in both .html and .js files:


I therefore suggest a default width in the default style.

Lisa Reisman
2010 March 12th, 12:54

hi, i am student in intro js. we are learning to use plugins for our final project. i am trying to use the tooltip you have for jquery. i have tried to change the options that you show as ediable but they don't seem to want to change the way i would like. i found the option in the main tooltip.js file. is there where i change them? tried adding a class & an id but then the js didn't apply at all. suggestions of what i should try next?

thanks so much! have a good one.


Abel Mohler
2010 March 13th, 14:25

I'm not sure having a default width is the right thing, since an auto width is best for very small messages. There may be some other solution that hasn't been considered. I'll give it some thought.

@Lisa Reisman:
You shouldn't ever need to edit the mail wtooltip.js file, unless you really know what you're doing. Overriding the defaults in any good jQuery plugin is done by setting the options on the instance of the plugin:

$(".some-element").wTooltip({/*options go here*/});

2010 March 24th, 14:41

I have a whole bunch of dynamically created anchors containing thumbnail images, I'd like the tooltip to provide some information about what the user will see when they click on the thumbnail.

Supposing there there is one like

I'd like to get the content for the tooltip via AJAX by sending a value of "guff"

If I do the following:

$("a").wTooltip({ content: true, callBefore: function(tooltip, node) { $(tooltip).html("url: "+node); } });

then the tooltip contains:
"url: http://domain.etc/guff.html"

So I can extract "guff" from this quite easily and do my AJAX thing, but, is this correct?
I feel I am missing something a bit more obvious?

2010 April 5th, 5:51

Hi. How to destroy wTooltip?
Or how to edit tooltip parameters later becouse in my situation i need to rebuild tooltip dynamically.

2010 April 7th, 10:03

The tooltip works just fine except when I want to display it on a click instead of on a mouseover.
In that case, I see two issues popping up :-)
One is that the tooltip content is empty, the tooltip displays its border in a little rectangle.
The other one is that the tooltip is not closed when mousing out of the anchor.
Having a display-on-click tooltip would allow us to use it on the iPhone :-)
Here is my code attempt:
$(document).ready(function() {
follow: false,
fadeIn: 300,
fadeOut: 500,
delay: 200,
style: {
width: "500px", // Required to avoid the tooltip being displayed off the right
background: "#ffffff",
auto: false,
clickAction: function(tooltip, node) {
return false;

2010 April 14th, 6:24

Just discovered that when I've got my link (a href) inside a jquery dialog, the tooltip doesn't seem to work. Something to do with the DOM Z-index ?

2010 April 14th, 6:29

Ok, answering my own question.
quick fix, just set the style's zIndex to an even more insanely huge number to get it to show up over the dialog.
style: {zIndex: 100000 }

Shouldn't this be automatic ? like a ().movetoTop on trigger.

2010 April 16th, 3:28

I'm experiencing another issue with the tooltip.

Most of the time, when mousing out of a tooltip, the other tooltips of the same page won't open up on mouse over.

A page reload solves this. But I can't ask my user to reload the page for that.

The code:

$(document).ready(function() {
follow: false,
fadeIn: 300,
fadeOut: 500,
delay: 20,
left: 200,
style: {
background: "#ffffff",
color: "#000",
fontSize: 14,
width: "400px"

2010 April 17th, 16:17

Love this tool you made. I put in on my site attaching it to 'area' from an areamap. Works pretty well, except when I update the map and reload titles, if I move around the map and end up having the popup push the right boundary of the screen, it appears to get out-of-sync and only pop up the title for a moment and then disappears. Any ideas?

2010 May 5th, 1:37

Is it possible to make the ajax request only on mouse over AND after the delay time? thanks fin

2010 August 31st, 11:27

There are some problems applying the tooltip to an 'area' from a map in IE. All other element that have the tooltip work fine, but in an area I see the standard tooltip. Any ideas?

2010 October 26th, 10:46

Hi, thanks for a great tutorial, how ever i have a it possible to open multiple tool tips (on different positions) on hovering a single element?? I 'll be really grateful to u , if u can help me.

2011 January 13th, 12:42


2011 January 28th, 14:35

I am using the area tag to trigger a tool tip. When I mouse over the area using the Firefox browser, the tooltip pops up! Awesome! When I do the same thing using IE8, the tooltip shows up at location 0,0 in the browser so I see part of it. Google chrome does not show any part of the tool tip. I did some code tracing and I was able to determine that Firefox provides a good set of coordinates for the position of the mouse. IE and Chrome on the other hand do not. Therefore the position is 0,0 for these two browsers. Any suggestions to overcome this issue?

Mike Krone
2011 February 5th, 14:44

Tool works great except on IE. I have a list of items I have this bound to which makes an ajax call, which the callbefore: param.

The problem I am having is after rendering about 15-20 times on different elements, it stop displaying, and only pops up for a split second. It may be a similar issue to Greg's. It works great on Firefox no matter how much I mouseover elements. You can see the page here, although you'll have to register to see the popups on the green/red buttons.

2011 February 25th, 14:30

Hi, great plugin! I have a little problem with my code. I use ajax DB call to add value to 'content'. When I first hover on an a-tag, nothing happens, but the second time popup pops up corretly. Firebug says the data is there at first time already.. Any suggestion?

2011 February 25th, 17:58

Okay I solved me prev. question. First, I used mouseover to get the current tooltip data from db with ajax, and then chained the wTooltip with the callBefore function. If it helps for someone :)

cheap coach bags
2011 February 28th, 19:07

Very interesting thanks. I believe there's even more that could be on there!

2011 March 3rd, 4:54

Hi Abel.

I found an issue in case of tooltip is used with this options:
auto: false,

Since you check the variable firstMove on mousemove event, even if I've already shown my tooltip, it follows the mouse pointer the same.

To solve this issue I think that this line of code:

if (o.follow || firstMove) {

has to be changed with this other

if (o.follow || (firstMove && auto)) {

In that way when I want to show the tooltip independently (auto:false) the first move becomes irrelevant.

2011 March 3rd, 5:11

To be correct the line:

if (o.follow || firstMove) {

has to be changed with this:

if (o.follow || (firstMove && {

2011 March 8th, 14:26


Plugin works beautifully in firefox and chrome, but in IE it will not refresh the ajax call EVER. I have a timestamp on my ajax page which fills the tooltip and it wont change in IE only the other browsers.

Dejan Prole
2011 March 11th, 6:34

Thank you for sharing with us this wonderfull script. I have one question: I want to set background image for tooltip. How can I do that?
Thank you,

Dejan Prole
2011 March 11th, 7:59

Just to answer to myself: I haven't saw className: null, here I can add my own CSS. But now I have new problem: when I set offsetX to negative value (offsetX: -50) tooltip is flashing when I move cursor over area where tooltip must show. When that value is positive - everything is ok. How can I correct this problem?

2011 April 27th, 5:24

How to add the tooltip text for each select box item by collecting the text from database....

2011 May 14th, 2:41


First of all thank you very much for such a wonderful examples.

my am very new to jquery, so i want to use it in my projects with ASP.Net. Thats why i want to the full functionality of the every function in jquery. Can you please help to use jquery function and how to build my own jquery functions/library.

medical coding
2011 June 16th, 15:35

great however how do I set the padding for the tooltip? The default tooltip is too big

wordpress best themes
2011 August 6th, 8:51

I want to set background image for tooltip. How can I do that?
Thank you,

Goran Lazarevic
2011 September 6th, 11:12

When I call twice (or more) wTooltip, previous content is not overwritten, but both content shows on tool tip. How can I remove previous content from tooltip?


2011 September 27th, 5:58

Achievement presents the only genuine delight in life

The Tominator
2011 October 12th, 11:25


Great work! There is a problem with buttons that are disabled: their tooltips do not show using the plugin but show the standard Windows tooltip. Any suggestions?

2011 October 17th, 11:20

I needed to have a parameter in the ajax url.

I tried this:

ajax: "$gLexiconUrl/get_lexicon_entry.php?lexiconEntryId="+$(node).attr("lexicon_entry_id"),

but the attribute value was not defined.

Then I tried this:

content: true,
callBefore: function(tooltip, node, settings) {
url: "$gLexiconUrl/get_lexicon_entry.php?lexiconEntryId="+$(node).attr("lexicon_entry_id"),
context: document.body,
success: function(data){

It works with one glitch though: because of the ajax asynchronus call, the tooltip is first displayed empty, and then its content is updated when the ajax response comes back.

Any way to solve this ?

Or any way to pass in a parameter to the ajax: property url ?


2011 October 17th, 14:50

I solved my issue described just above by sending a synchronous ajax request, by adding the property
async: false,
to the ajax code chunk, as in:
url: "$gLexiconUrl/get_lexicon_entry.php?lexiconEntryId="+$(node).attr("lexicon_entry_id"),
async: false,
context: document.body,
success: function(data){

2012 January 13th, 5:36

Can we make the border round corner?

north face outlet
2012 January 13th, 21:45

this is one of the best reads I've had n a while, i will be sure to recommend this to a couple of people, great job

2012 February 6th, 22:05

Every one knows that men's life seems to be high priced, nevertheless some people need cash for different stuff and not every person gets big sums money. So to get good mortgage loans or just auto loan will be a correct solution.

2012 April 6th, 7:56


I had an issue for a long time, like a year at least, which remained across updates and downloads of your plugin.

The issue was that the tooltip would disappear immediately after showing. This happens only when using it in conjunction with an ajax content setup.
I finally worked around the issue with using the property auto to false and doing a time out to hide the tooltip.
It can be seen at the page:
by mouse hovering on any italicized word.
Removing the auto false property would show the issue, on IE and Firefox.
Note that sometimes the issue does not occur, on the very same page. It is a bit inconsistent.
Anyway, now I'm happy :-)
Thanks !

2012 April 10th, 2:08

Please add the stop() function to prevent ququeing up for the event if the the links are close to each other and user hovers over 3-4 links at once

$(tooltip).stop(true, true).fadeIn(o.fadeIn);
$(tooltip).stop(true, true).fadeOut(o.fadeOut, function(){

2012 June 13th, 10:14

Hi, first of all great plugin!!

I write here because the problem that I will explain drives me crazy.

If I apply WTooltip on links and I set this to follow the mouse, at page load the tooltip is positioned on the top left corner page.
This happens because WTooltip reach the mouse position after that the user move the mouse, so, if I click on a link and I NOT change the mouse position moving the mouse, when the page linked by the clicked link is loaded, the WTooltip go on top left corner as I tell.

The issue happen on Firefox because on Chrome, on page load, the WTooltip don't appear until the mouse move and this is ok to prevent the wrong position because if one don't move the mouse WTooltip is not able to position itself..

The solution: apply a style like "left:-10000px" on wtooltip !!!

If there are better solutions to solve this problem please let me know.

2012 December 6th, 16:11

Hello, thank you for your tool.

I would, after having created my tooltip on mouseover, that will be displayed directly.

Currently, remove the mouse and the board on the element so that it appears.

Sorry for my english i'm french.

2012 December 28th, 8:51

UGG Boots Sale, UGG Boots Clearance, UGG Boots UK

2013 July 17th, 18:17

Several years ago another developer implemented this plugin and it has been working great. The organization using it decided they want to change the functionality to require a click to show the description instead of on a mouseover. Using this site including the comments and documentation I've been able to get most of the way there. I am experiencing and odd issue where the first click will reveal the description, and then it will hide, but then a second click will cause it to flash and not stay open. Currently testing in IE9 on Win 7. Any suggestions welcomed. Here are my settings.
$("#" + sElementId).wTooltip({

auto: false,
content: sTooTipMsg,
className: "CvvTooltipHover",
style: {
background: "#ffffff",
border: "4px solid #336633"
timeout: 400,
callAfter: function (tooltip, node, settings) {
clickAction: function (tooltip, node) {

<< Back to All Tootip Options | Go to Main Page

Download: Uncompressed Version | Compressed Version

Most Recent Blog Post: jQuery Mapbox Updated

Privacy Policy | Click Here | jQuery Plugins by Wayfarer | Freelance Jobs Available | Random JavaScript Code Samples | Share a Random Link | JavaScript Jobs