ALTTXT Tooltip Script v-1.6

This script displays a little 'tooltip' near any link you want similar to the ALT HTML attribute. These box will always stay within the window boundaries to avoid creating any new scrollbars. This script is designed to be run in IE4+, NS4x, and NS6. However, there are some features that will not work in NS4.

Over 2000+ free Javascript
at Website

Sampled by

Features In which browser
will this run?

  • V 1.2: Added fading effect for ie4+ and ns6+ only. Optimized the code a bit.
  • V 1.3: Added "mousefollow" mode. See details below.
  • V 1.4: Removed "center" option. Added "xoffset" & "yoffset" variables instead for finer customization.
  • V 1.5: Made it so the "yoffset" variable actually did what it was supposed to. Also added functions for toggling a few settings.
  • V 1.6: Added a "locking" feature so if you have links inside the box, the script lets you click them (only when mousefollow is set to false). And, you can set the padding attribute (visible in ie4+ and ns6 only).
Another effect...

Click here to toggle "mousefollow" mode. Uses the toggle_mousefollow() function.

Click here to toggle "dofade" mode. Uses the toggle_dofade() function.

Click here to toggle "centertext" mode. Uses the toggle_centertext() function.


1: Copy and paste the following style declaration in the HEAD section of your page, then edit the style attributes to suit:

Select all...

2: Copy and paste the following script in the HEAD section of your page:

Select all...

3: Copy and paste the following HTML at the end of the BODY section of your page. Note: you can only adjust the padding attribute in here. Setting it in the style sheet in step 1 will cause strange results in NS4.

Select all...

4: Lastly add the mouseover/mouseout event handlers to each link that you want this effect for. Example:

<a href="" onmouseover="writetxt('Visit my website')" onmouseout="writetxt(0)">Link text</a>

You can also put these event handlers in IMG tags, SPAN tags, DIV tags, etc, but NS4 will not respond to those events. It won't produce errors though.

There are 6 settings in the js file you can set to control the way the script behaves. Just edit the js file to change them: You can cause a box not to disappear once the mouse leaves the link by simply omitting the onmouseout="writetxt(0)" part. This will cause the current box to remain visible. This is best used when "mousefollow" mode is disabled (set to false). Otherwise, the onmouseout="writetxt(0)" is required to cancel the box when it leaves the link.

A note about the content of these boxes. If you need to use quotes for HTML tags or whatever, they must be escaped with a backslash ( \ ). This prevents the script from thinking the quotes you use is the end of the content and producing errors.

You can also use the character entity in place of double quotes. Instead of using ", try using &quot;

So, lets say you want to include a link inside an alttxt box, you could write something like:

<a href="" onmouseover="writetxt('<a href=&quot;;>LINK TEXT</a>')" onmouseout="writetxt(0)" > Alttxt link... </a>