How To Make The Javascript Tooltip

I Got This Entire Article. The Reason I Posted It Was So The Information Wouldn't Just Disappear.
Extended Tooltip from http://javascript.about.com/od/guidesscriptindex/a/tip.htm
How To Make The Javascript Tooltip

More of this Feature
• Part 1: What is it
• Part 3: The Script
• Part 4: Defining Tips
• Part 5: Linking to Tips
• Part 6: Customising Tips

So let's start by looking at what a tooltip looks like when created using a title attribute. Try hovering your mouse over this link.

We can create tooltips with a similar appearance to this by using Javascript. Try hovering your mouse over this link. This tooltip works in Internet Explorer 4+, Netscape 6+, and Opera 7+ just the same as the earlier one, it doesn't work in Opera 5 but it does work in Opera 6 except for displaying the tooltip in a fixed position instead of near the link. This tooltip also works in Netscape 4 which the earlier one didn't. Finally, this tooltip won't work if your visitor has Javascript turned off. One difference that you will notice between this tooltip and the earlier one is that this tip displays immediately you move the mouse over the link whereas the earlier example had a delay before the tooltip appeared. The only problem with those browsers that display the tooltip in a fixed position rather than relative to the link is that if the link is so far down the page that the fixed position at the top of the page where the tip is displayed has scrolled off of the screen then your visitor wont see the tooltip.

So why would we want to bother with a Javascript tooltip rather than just using the title attribute? Apart from the fact that the Javascript tooltip works in Netscape 4 there doesn't appear to be much advantage to using it so far does there? Well try hovering your mouse over this link. You should see a copy of the title graphic from the www.felgall.com along with a message suggesting that you visit the site. You can't get a tooltip like that to display by using the title attribute.

With Javascript generated tooltips we can include anything that we can code using HTML including graphics and even code generated from other Javascripts. This will make our tooltips much more flexible in what they can display and hopefully much more useful to your visitors. The only thing that you do need to keep in mind is that your visitor will be unable to interact with the tooltip content using their mouse since as soon as they move their mouse from over the link to which the tooltip is attached, the tooltip will disappear.

The next step is to get this script to use on your own pages.

============================================

Part 3 : The Script

The first step in using this script is to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called tooltip.js

// Extended Tooltip Javascript
// copyright 9th August 2002, by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered
var DH = 0;var an = 0;var al = 0;var ai = 0;if (document.getElementById) {ai = 1; DH = 1;}else {if (document.all) {al = 1; DH = 1;} else { browserVersion = parseInt(navigator.appVersion); if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {an = 1; DH = 1;}}} function fd(oi, wS) {if (ai) return wS ? document.getElementById(oi).style:document.getElementById(oi); if (al) return wS ? document.all[oi].style: document.all[oi]; if (an) return document.layers[oi];}
function pw() {return window.innerWidth != null? window.innerWidth: document.body.clientWidth != null? document.body.clientWidth:null;}
function popUp(evt,oi) {if (DH) {var wp = pw(); ds = fd(oi,1); dm = fd(oi,0); st = ds.visibility; if (dm.offsetWidth) ew = dm.offsetWidth; else if (dm.clip.width) ew = dm.clip.width; if (st == "visible" || st == "show") { ds.visibility = "hidden"; } else  { if (evt.clientY || evt.pageY) {if (evt.pageY) {tv = evt.pageY + 20; lv = evt.pageX - (ew/4);} else {tv = evt.clientY + 20 + document.body.scrollTop; lv = evt.clientX  - (ew/4) + document.body.scrollLeft;} if (lv < 2) lv = 2; else if (lv + ew > wp) lv -= ew/2;if (!an) {lv += 'px';tv += 'px'};ds.left = lv; ds.top = tv;} ds.visibility = "visible";}}}

============================================

You will also need to select the code from the text box below and copy it into a file called tooltip.css

.tip {font:10px/12px Arial,Helvetica,sans-serif; border:solid 1px #666666; width:270px; padding:1px; position:absolute; z-index:100; visibility:hidden; color:#333333; top:20px; left:90px; background-color:#ffffcc; layer-background-color:#ffffcc;}

<hr>

You next attach the script into your web page that you wish to display tooltips on by adding the following code into the head section of your page.

<script type="text/javascript" src="tooltip.js">
</script>
<link rel="stylesheet" href="tooltip.css" type="text/css" />

Now that you have the script installed on your page the next step is to define your tooltips.

<hr>

Part 4 : Defining Tooltips

By incorporating the code, we have made the Javascript tooltip facility available to use on our page. To actually use Javascript tooltips we next need to define the content of each tooltip that we want to use with our page.

We do this by coding each tooltip within <div> tags immediately after the <body> tag within the page that will use it. For example the tooltips I used as an example were defined using the following code:

<div id="t1" class="tip">This is a Javascript Tooltip</div>
<div id="t2" class="tip"><table align="center" width="250" border="0" cellspacing="0" cellpadding="5" bgcolor="#008cff"><tr><td valign="bottom" align="center"> <img src="graphics/head.gif" width="250" height="90" border="0" alt="" /></td></tr><tr><td valign="bottom" align="center">Please visit my site</td></tr></table></div>

Using class="tip" with each entry defines the content of the <div> tag as being a tooltip because it associates it with the tip class that we defined in the cascading stylesheet. The stylesheet defines the tip as using absolute positioning so that its location on the page will not be affected by its location within the code and the visibility is set to hidden so that it will not be displayed on the page until something happens to alter that visibility. We define an unique id for each tooltip so that we can reference which tip we want to display in the code that we add to the links. You can use whatever names that you want for your tooltip ids as long as they are unique. As you can see from the second example we can easily include tables, images, javascripts, etc. into the tooltips that we intend to display.

Now that you have created your tips the final step is to create links on your page and attach the tooptips to them.

============================================

Part 5 : Linking to Tooltips

So all that we have to do now is to actually attach the tooltips to the links within our page where we want them to be displayed. The code to do this is inserted into the anchor tag that defines the link. We can define these tooltip links in one of two ways, either we attach the tooltip to an existing link which when clicked on will take you to a different page, or we can set up a link that does nothing when clicked on but which will display our tooltip when the mouse moves over it. The following shows you how to code your anchor tag for the second of these options (where you want the link to go somewhere when clicked you should omit the onclick parameter and code your destination in the href parameter):

<a href="#" onmouseout="popUp(event,'t1')" onmouseover="popUp(event,'t1')" onclick="return false">
As you can see, there are two places in this code where we have referenced the first of the tooltips that we defined before. For each tooltip link that you want to create you use this same code but substitute the id that you defined for the tooltip that you want to attach to the specific link.

Well that's almost all there is too it. With the code that I have given you it will not take you much more effort to create rather fancy tooltips for your pages that greatly extend the user friendliness of your site. You may however want to change the appearance of individual tooltips.

============================================

Part 6 : Customising Tips

The extended tooltips created with this script all use the same general appearance for the tooltip popup including background colour, width etc. This may not be exactly what you want as some tooltips might contain just one or two words while others contain wide images. The solution is to customise the appearance of each tooltip to suit the requirements of that tip. We can do this without modifying the Javascript and without modifying what we already have in the stylesheet. All we need to do is to add an additional entry into the stylesheet to specify the custom overrides for a specific tip.

With my sample tooltips I changed the width of the individual tooltips to suit their contents using the following additions to the tooltip.css file:

#t1 {width:130px;}
#t2 {width:480px;}

Of course the width of the tooltip is not the only thing you can change by adding to the stylesheet. Try hovering your mouse over this link where the font size and background colour have been changed by adding a new entry to the stylesheet.

#t3 {font:bold 14pt verdana,arial,sans-serif;
background-color:#ffcccc; layer-background-color:#ffcccc;}

By selecting the appropriate entries to add to your stylesheet you can create tooltips with whatever appearance you like. All that you need to do to make these entries specific to a particular tooltip is to attach the stylesheet attributes to the id of that tooltip. The only stylesheet attributes that can't be overridden without breaking the script are position:absolute; z-index:100; visibility:hidden; as changing any of those will stop the script from functioning correctly.

One final note, there is a problem with Stacking Order relating to some form fields so you should try to avoid placing links that use these tooltips near to form fields, particularly drop down selection lists.
Back To The Top

Bud's CDs FREE MP3s     Alphabetical Index Of Everything In This Site