Download tooltip for forms

Demo

Download script

You can download the entire script from this Zip file

Files included in the package:

• form-field-tooltip.html = Main demo HTML file
• js/form-field-tooltip.js = Main JS file for the script
• js/rounded-corners.js = JS file created to add rounded corners dynamically to the tooltip
• css/form-field-tooltip.css = Main CSS file for the tooltip
• images/* = Arrows used by teh script.

Configuration

Include files

First, you need to include the js files and css files as in the demo(form-field-tooltip.html)

Define tooltip text

Tooltip text is something you add manually to your <INPUT> or <TEXTAREA> tags by creating a tooltipText attribute. Example:

<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">

Initialize and configure the script

At the bottom of your page, add code similar to this:

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>

Which methods you want to call depends on what you need. Look at the complete documentation for more help.