Web design and web consulting: WendyLeBel.com
Home Web Design & Consulting Excel Tutorials Links About me Contact me
DHTML Tooltip Generator

Sometimes the HTML "alt=" isn't enough to relay the detail you'd like it to. Here is a tool that will allow you to give your users more interactive tooltips.

Here is an example of how it works (Mouse Over Me!).

After you've installed the generated code, in order to trigger a tooltip, you'll need to surround the area with an <a> tag which contains onMouseover and onMouseout properties. Here's an example:

onMouseover="EnterContent('ToolTip','Tooltip Title','Tooltip Content'); Activate();" onMouseout="deActivate()"

The above is meant to be entered into already-existing <a> tags. If you want to assign a tooltip to an area that isn't a link, you'll have to add the entire tag:

<a href="javascript:void(0)" onMouseover="EnterContent('ToolTip','Tooltip Title','Tooltip Content'); Activate();" onMouseout="deActivate()">ToolTip Me</a>

The highlighted areas hold the content of the tooltip. There are 2 areas - the title area, and the content area. You may simply copy the above examples and replace the content areas with your own.
Tooltip Properties
DTHML Tooltips
Title Text Color:
Title Text Font:
Title Text Size:
Content Text Color:
Content Text Font:
Content Text Size:
Title Area Color:
Content Area Color:
Tooltip Table Width:
Click here for a palette of Hex values -

home | web design & web consulting | excel solutions | tutorials | links | about me | contact me
portfolio | faq | payment terms

Copyright © 2005 Wendy LeBel. All rights reserved. my personal site!