Walter Zorn’s ToolTip with a JQuery Twist
Special thanks to Walter’s family and friends for making the site available, and we are truly sorry for your loss.
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 R.I.P.
Thanks to Bjarne Pagh Byrnak for letting us know Walter’s site was back up.
21 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!
Miral Says:
December 27th, 2010 at 5:47 am
Hi Marion,
The walter zorn tooltip follows the mouse on an image, with the popup displaying html content. Is there anyway to instead of having the popup with html follow the mouse by an offset position to “grow” like the google images effect?
marion Says:
December 28th, 2010 at 7:18 am
No, you can’t do that based on Walter’s code. Once you had the HTML & CSS figured out w/ the positioning, it wouldn’t take too long to setup a jQuery plugin to do that.
If you do a search, you may find someone has already written a jQuery plugin for it.
Miral Says:
January 9th, 2011 at 10:12 am
Hi Marion,
I found this:
http://mediamilan.com/examples/simpleSleek/
which seems to have the grow effect, except I am not sure how/where to insert the walter zown tooltip info such as text and other variables that go under the grown image.
Can you point me in the right direction? Are you 100% sure that we cannot tweak the walter zorn tooltip to grow? Maybe overwrite the way it offsets to grow instead and have the same text under it?
Miral Says:
January 12th, 2011 at 10:01 pm
Hi Marion,
Not sure if you got my last reply. I’m trying to see what the best way to go about this is.
You’re saying that it’s possible to still accomplish the desired positioning and growing effect external to the wz_tooltip but use the wz_tooltip tip and untip in terms of content provided? And jquery will marry the growing positioning with the tip content from the wz_tooltip, in a similar fashion to the jquery code in your post? Is there any need for the balloon in this case and what exactly does it do that’s extra to the basic wz_tooltip?
marion Says:
January 13th, 2011 at 8:29 am
@Miral, sorry for the delay. I got the reply, and marked it as read, I checked out the link you provided, and then got interrupted before I could reply. I need to do some testing on it. Based on the link you provided, I may be able to blend the jQuery code to force it to grow the tooltip.
The balloon isn’t needed for the WZ tooltips. I typically use it because the sites we set it up on want it, and it’s not difficult to add or remove from the setup. If I’ve not replied a in a couple days, yell at me. 
Miral Says:
January 13th, 2011 at 9:47 am
Thanks for the lighting fast reply Marion. I just want to add that I’m only attempting to have the position of the tooltip grow out like goog images from a thumb image, but the images in the new tooltip will actually NOT be an animated % bigger than the thumbnail image plus the wz_tooltip text. The image in the new tooltip will be a variable size of its own, based on the size of the original image which wz_tooltip passes to it already, not to be scaled in anyway from the thumb image. It’s just the positioning and growing out that needs jquery assitance, all wz_content is great.
I’ll yell at you if you haven’t replied in a couple of days, awesome blog btw:)
Ken Says:
March 14th, 2011 at 3:33 pm
If you test the WZ Tooltips in IE9 or Firefox 4 you’ll see that they don’t work properly if WIDTH is set to zero (i.e. automatic width). The word wrapping is broken, probably because the new fonts used by IE9 and Firefox 4 are slightly wider. But worry not, I have worked out a fix. If you replace tt_w += iAdd; in the wz_tooltip javascript file with tt_w += iAdd + 2; it will increase the width of the tooltip box by 2 pixels, which should solve the problem…
Drew Says:
March 29th, 2011 at 2:27 am
Hello, I found this post through Google and saw that it was still relevant so I thought I would append my post about Firefox’s lack of opacity using the WZ Tooltip script. I still don’t have a solution so if anyone has some input, I would be very grateful.
This is what I posted on this site: http://www.prettyscripts.com/code/javascript/wz_tooltip-usage-notes
Oh. the tool tip script is posted on Sourceforge now if anyone is interested.http://sourceforge.net/projects/wztip/
WZ_ToolTipLover @ 2011-03-24 04:16:49
*****
I am sad too to hear about Mr. Zorn if that is indeed true. Wow, that’s just not good…
I really love this script but I’ve noticed that now that I have updated to Firefox 4 that the opacity setting doesn’t work in that browser. In IE9 and Firefox 3.6.x it works still but now that Firefox 4 is one day old – the opacity is no longer transparent. Here is a temp URL for a photo gallery instructions on a web site I am developing for a client: http://quickwinch.ca/testing/gallery.php
You can try it in any browser other than FF4 and it will be see through. I don’t know how to trouble shoot this or fix it. Any ideas?
Bjarne Pagh Byrnak Says:
July 25th, 2011 at 3:28 am
Walter Zorn’s website is up again – but it has moved!
A complete copy of the site can now be found at
http://www.walterzorn.de/en
where libraries, manuals, etc. can be found. Everything seems to be fully up-to-date.
The versions that can be downloaded from the archive mentioned elsewhere in this thread, and from Walter Zorn’s Italian website, are slightly obsolete. His oroginal site does not exist any more. A brief explanation can be found at my site
http://www.bjarne.altervista.org
together with an example where the graphics libraries were used for an interactive interface.
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.