Click to toggle dark text on white
wTooltip Discussion, Feedback
Download: Uncompressed Version | Compressed Version
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.
Ryan
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
@Ryan:
jQuery(element).unbind("mouseover").unbind("mouseout")
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?
Irec
2009 July 14th, 22:28
Can it be modified so it will respont to a onclick event?
ankit
2009 July 17th, 0:12
Good and simple script. but one question though....
if it would pick the title of the A tag by default...it would have been more easier to work with
Abel Mohler
2009 July 18th, 14:36
@Irec:
yes, there is a click callback, which has access to the node which is being hovered over, and the tooltip. It works like this:
$("#element").wTooltip({
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.
@ankit:
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.
peter
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
@peter:
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
@Michael:
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:
$(elements).wTooltip({
clickAction: function(tooltip, node) {
$(tooltip).hide();
return false;
}
})
Evol
2009 August 25th, 7:35
How can I change the position of the tip? I want it above my mouse cursor.
Thomas
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!
Mike
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
@Evol:
Check out the offsetX and offsetY options, this will allow you to change the position however you like.
@Thomas:
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.
sage
2009 September 6th, 2:53
Is it possible to disable the tooltip in the callBefore function?
Abel Mohler
2009 September 8th, 10:05
@sage:
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).
joes
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
@joes:
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: http://craigsworks.com/projects/qtip/
Lews
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 (!o.style && typeof o.style != "object")'...
Shouldn't it be 'if (o.style && typeof o.style != "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..
Lews
2009 September 16th, 6:01
Sorry for this wall-of-text - server script has replaced "
" to "rn" :(
andrisp
2009 September 16th, 7:46
Hello,
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
@andrisp:
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.
@Lews:
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
@Lews:
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.
Bob
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', '');
$(this).wTooltip(
{ content: tooltipContent, delay: 200, fadeIn: 200, fadeOut: 100});
});
});
Jane
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! :)
Michael
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.
Thanks!
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
@Micheal:
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.
Ashok
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
$(document).ready(function()
{
$(".testTooltipClass").wTooltip({
content: false,
className: "tooltip",
style: false//remove all pre-set inline styles
});
});
Ziaul Hasan
2009 November 10th, 17:10
Hi,
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.
Thanks
Dan
2009 November 12th, 13:36
Hi,
I have the same problem as Ziaul, can you help?
Thanks
Dan
2009 November 12th, 13:53
PS: Forgot to say, it works fine in IE8 compatibility mode.
Stefan
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
Dan
2009 November 19th, 5:29
Fixed it in the end all to do with W3C compliance.
Alex
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."
Trent
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!
Verlager
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
@Trent:
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.
@Verlanger:
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.
Stephane
2010 March 6th, 3:39
There is an issue with the tooltip that can be seen at http://www.rasalp.org/wtooltip.html
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:
// ADDED THIS TO PREVENT THE DISPLAY OFF THE RIGHT OF THE SCREEN
I therefore suggest a default width in the default style.
<< Back to All Tootip Options | Go to Main Page
Download: Uncompressed Version | Compressed Version
Click Here | jQuery Plugins by Wayfarer | Freelance Jobs Available | Random JavaScript Code Samples