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.

Comments

1 2 3 4 5

How do i make the corners transparant?

Please post and mail it to me :(

b.pasmans@rszk.nl

bart at 11:55AM, 2011/03/24.

1 2 3 4 5

hey, doesn't it works in IE 9?

Fábio at 03:38PM, 2011/04/13.

Admin comment

1 2 3 4 5

Fabio,

The IE9 problem has now been solved

DHTMLGoodies at 05:09PM, 2011/04/13.

1 2 3 4 5

The error goes out by ie6.

ryu at 08:55AM, 2011/06/10.

1 2 3 4 5

Hi!

How i can to put zIndex for arrow images?

I put this tooltip on popup, seems to be that work , but the problem is for arrow.

Thank you.

veronica at 04:21PM, 2011/06/30.

1 2 3 4 5

Thanks so much for this :)

tomer at 09:26AM, 2011/08/19.

1 2 3 4 5

how this tooltips works....
and give me an example

swathi at 08:13AM, 2011/09/16.

1 2 3 4 5

How can I put the tooltip to the left of the input object?

Ori Idan at 08:58PM, 2011/09/20.

1 2 3 4 5

how it work when tooltip page call through ajaz call....
plz reply....

kirti at 11:52AM, 2011/09/21.

1 2 3 4 5

Brilliant!!

David at 01:05PM, 2011/12/01.

1 2 3 4 5

Hi,
How to change the color of arrow?

thanks in advance

sam at 01:32PM, 2012/01/01.

1 2 3 4 5

Is there a simple way to make individual tooltips into hyperlinks, rather than making the text within a hyperlink?

John at 02:31AM, 2012/01/05.

1 2 3 4 5

Hey its not working on IE7.

Neha at 01:46PM, 2012/01/10.

1 2 3 4 5

When I use this on a sliding form when I move from one form to another the tool tip does not close. Even on the example, when the next field (drop down menu) does not have tool tip, the previous tip stays open. How can I force the tool tip to close after leaving a field if no tool tip is in the next text field.

IveNoClue at 11:05AM, 2012/03/11.

1 2 3 4 5

Is anyone else having issues using this in chrome?

Andrew at 07:38AM, 2012/06/22.

1 2 3 4 5

Brilliant!!
Thanks for this post.

I also put the tooltip to the left of the input object.
I made some changing I am happy its working in all browsers.

qaisar imtiaz at 09:30AM, 2012/07/18.

1 2 3 4 5

I fix the arrow:

arrowDiv.styles.zIndex=1005;

in the js file.

p1r4t0s at 04:34PM, 2013/02/20.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 01:57, 05-20-2013.