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 &lt;a&gt; 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.