Inside Technique : WebFX DHTML Demos : Animated Tooltips

This page replaces the built-in tooltip with an animated HTML tooltip. This is more powerful than the plain text support provided through the title attribute. In addition, the tooltip animation is optional. Adding or removing the animation is as simple as including an additional script file on your page.

Tooltip Demonstration requires Internet Explorer 4.0 or later

When using our HTML tooltip function, you do not to also supply the HTML title attribute. For example, hover over the "i" in heading. We are displaying both the TITLE and custom TOOLTIP at the same time. You should also be careful when you write the TOOLTIP properly enclose the string in quotes and to not nest quotes. eg, TOOLTIP="Test". Instead you can use single quotes within the string: eg., TOOLTIP="Test".

Below demonstrates how to use the TOOLTIP. You can customize the appearance of the tooltip using the TOOLTIPSTYLE attribute. This attribute works the same as the HTML STYLE attribute and can be used to set any CSS property (but do not change the position or the display). The default value for this attribute is "background: infobackground; color: infotext; font: statusbar; padding: 1; border: 1 solid black".

Other Enhancements

If you wan't to decide the width (or height) of the tooltip rather than let us calculate it for you, specify a width using CSS inside of the tooltip. To ensure your tooltip does not wrap, use the tag <NOBR> (there is also an attribute called nowrap that works for DIV and table cells.

Tooltip Code

To enable these tooltips, you need to download the code and include the following line in your HTML document.

<script language="Javascripts" src="tooltip.js"></script>

If you also want the tooltip to animate like in this page, you need to download the swipe.js script and include it on your page in addition to the tooltip script:

<script language="Javascripts" src="swipe.js"></script>

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.