Comments on: Walter Zorn’s ToolTip with a JQuery Twist

By: Bjarne Pagh Byrnak

Bjarne Pagh Byrnak — Mon, 25 Jul 2011 07:28:17 +0000

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.

By: Drew

Drew — Tue, 29 Mar 2011 06:27:09 +0000

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?

By: Ken

Ken — Mon, 14 Mar 2011 19:33:56 +0000

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…

By: Miral

Miral — Thu, 13 Jan 2011 14:47:16 +0000

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:)

By: marion

marion — Thu, 13 Jan 2011 13:29:06 +0000

@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.

By: Miral

Miral — Thu, 13 Jan 2011 03:01:04 +0000

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?

By: Miral

Miral — Sun, 09 Jan 2011 15:12:39 +0000

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?

By: marion

marion — Tue, 28 Dec 2010 12:18:06 +0000

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.

By: Miral

Miral — Mon, 27 Dec 2010 10:47:00 +0000

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?

By: Mirsad

Mirsad — Tue, 08 Jun 2010 16:11:43 +0000

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!