Walter Zorn’s ToolTip with a JQuery Twist
If you’ve ever done a search on Google for “javascript tooltip“, you’ve probably come across Walter Zorn’s DHTML JavaScript Tooltips. As I write this Walter’s web site comes up as the first result out of 1,490,000. I don’t know Walter, and I doubt I’ll ever have the chance to actually meet him, but if you’re looking for a JavaScript tooltip, his script is the one to use.
Now for those of you saying, “I want one that works with JQuery!”, hold your horses. No, Walter’s script isn’t a nifty little JQuery plugin, but that’s the best part, it doesn’t have to be. The WZ Tooltip script can be used with or with out JQuery, and it works the same and just as good under either circumstance. I know you’re saying stop rambling and tell me how to use it with JQuery….
Setup both JQuery and wz_tooltip according to their instructions, they’re both really clear on how to set them up, and make sure you have the tip_balloon extension to. Save yourself some time, and confirm they’re both working properly, then take the following steps to marry JQuery with wz_tooltip.
Setup your tool tips as hidden <div>s, and give each one of them a unique ID.
<div id=”tip1″ style=”display: none;”>This is my tool tip copy.</div>
In your <a> tags that will trigger the tooltip, add the class attribute and the rel attribute:
class=”toolTip” rel=”tip1″
… the class attribute remains the same, but obviously, you’ll want to change the rel attribute to match the ID of the corresponding tooltip.
After you’ve added your tool
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> // <![CDATA[ $(function(){ // Add wz_tooltips automatically $(".toolTip").mouseover(function(e) { getTipById = $(this).attr('rel'); // Look for rel attribute first <a> tags only if(!getTipById) {getTipById = $(this).attr('id').replace('_',''); } // use id attribute if it's not found any other tag, but must be prefixed with _ and match tool tip text toolTipText = $("#" + getTipById).html(); // get html from id if(toolTipText) { Tip(toolTipText, BALLOON, true); } // show tool tip if copy was found }); // Untip Links automatically $(".toolTip").mouseout(function(){ UnTip(); }); }); // ]]> </script> |
I know you’re thinking, “But I dont’ want to use this on an <a> tag!” Then don’t. Add the toolTip class and add an ID to the tag you want to use this with, just add an “_” underscore to the beginning of the ID, and you’re all set.
Thanks for the great script Walter.
12 Responses to “Walter Zorn’s ToolTip with a JQuery Twist”
marion Says:
December 31st, 2009 at 8:26 am
I figured it out. The problem is that the both files, the jquery.tablesorter.js & wz_tooltips.js are creating a new object called config. JQuery wins because it gets created on the document.ready(), and by the time that function is run, wz_tooltips has already loaded.
So… how do you fix this?
I modified the wz_tooltip.js file to create a wz_config object (less code in that file), and you can download it from here:
http://www.figmentthinking.com/ft_downloads/javascript/wz_tooltip.wz.zip
Alex Says:
January 4th, 2010 at 7:50 am
Thanks Marion. It fixed the problem. The tooltips are now shown as intended. However, in my case, I have to edit the jquery tablesorter’s pager plugin js file instead. But it works perfectly in both ways.
marion Says:
January 4th, 2010 at 11:28 pm
Glad to hear it all worked out for you Alex.
For those who need it you can find Alex’s modified version of the JQuery Tablesorter pager here:
http://www.figmentthinking.com/ft_downloads/javascript/jquery.tablesorter.pager.zip
Gyorgy Says:
March 10th, 2010 at 5:21 am
Hi,
I just would like to say big thanks to both of you for this workaround related to tablesorter.pager and wz_tooltip 
Cheers.
Goran Eriksson Says:
May 5th, 2010 at 6:22 am
What has happen with Walter Zorn website ?? It is passed away.
Why??
Anybody know??? I really need a tooltip from WZ.
Regards
Göran
Sweden
marion Says:
May 5th, 2010 at 9:37 pm
I don’t know what happened to WalterZorn.com, I know I have a copy of his JS tool tips, just have to find it.
Update… what am I thinking, I posted a link to it in the 2nd comment on this post.
Goran Eriksson Says:
May 6th, 2010 at 7:24 am
The script from WZ I want is:
Mouse over, when I point at a small picture (or a word) a bigger picture will be visible and connected to the mouse-pointer.
The WZ tooltip was in 2 or 3 steps.
I know nothing about Javascript so I need the fully instruction for success!! Do You have it?
Is it possible to came in contact with Walter Z (and ask where the website is)
marion Says:
May 6th, 2010 at 8:27 am
Even though WalterZorn.com is down, you might be able to find what you’re looking on the WayBack Machine here:
http://web.archive.org/web/*/http://walterzorn.com
I don’t know why WalterZorn.com is down, last night I did make an attempt to email the person who owns the domain, but I have no way of knowing if they received the email (or if they ever will.)
Trident101 Says:
May 7th, 2010 at 7:19 pm
Hello all from reading here and from another site/forum were another user was asking if anyone knew why the Walter Zorn site was down it has been posted that Walter has sadly passed away some time last year I have tried to confirm this but unable to find anything that may confirm this on the net …to read the reply from the forum I read this you can visit this url..http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=25422&postdays=0&postorder=asc&start=15 look for the posting by Strodlee. If this is the case R.I.P. Walter thanks for all that you gave us ….
Mirsad Says:
June 8th, 2010 at 12:11 pm
Yeah, I noticed the same thing. Sad to hear. I’ve read nothing but good news about these tool tips. I wonder what exactly happened to him? RIP Walter
As for finding these files on the web… the only files I could find are:
tip_baloon.js (Google= download tip_baloon.js walter zorn) and go to the koders.com result.
wz_tooltip.js (Google= download wz_tooltip.js walter zorn) and go to the koders.com result.
and of course your (Marion’s) modified version which is in the second comment:
wz_tooltip.wz.js
Is this all we’d need to use the tooltips”? I tried editing some of my tags according to this site:
http://edwardsmark.com/proofOfConcept/walterZorn/
and added the .js scripts in my html document, but I don’t get any tooltips at all. Is there any CSS or any other HTML that I’m missing?
Any help would be appreciated!
December 29th, 2009 at 10:41 pm
Just wanted to share this error that I encountered when integrating jquery (specifically jquery tablesorter pager plugin) with wz_tooltip. I was googling for solution when I came across your site. Just thought that you or your readers might be interested in this. If you guys spot any solution please do post. Thanks.
—
I am using wz_tooltip on my site and every page works well except one that has a table with paging. I am using jquery tablesorter pager plugin for the paging. If the pager part is turn off then the tooltip would work. Firebug shows that there is an error on line 582 in wz_tooltip.js – “tt_aV[TITLEBGCOLOR] is undefined”. Other pages do not have this error and tooltips on other pages shows fine.
I have done a test page here:
http://www.mediafire.com/?tngzdtmmmwu
Please help, thanks.