Download tooltip for forms

Demo

Bookmark and Share

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

bart
How do i make the corners transparant?

Please post and mail it to me :(

b.pasmans@rszk.nl
bart at 04:55AM, 2011/03/24.
Fábio
hey, doesn't it works in IE 9?
Fábio at 07:38AM, 2011/04/13.
Admin comment
DHTMLGoodies
Fabio,

The IE9 problem has now been solved
DHTMLGoodies at 09:09AM, 2011/04/13.
ryu
The error goes out by ie6.
ryu at 12:55AM, 2011/06/10.
veronica
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 08:21AM, 2011/06/30.
tomer
Thanks so much for this :)
tomer at 01:26AM, 2011/08/19.
swathi
how this tooltips works....
and give me an example
swathi at 12:13AM, 2011/09/16.
Ori Idan
How can I put the tooltip to the left of the input object?
Ori Idan at 12:58PM, 2011/09/20.
kirti
how it work when tooltip page call through ajaz call....
plz reply....
kirti at 03:52AM, 2011/09/21.
David
Brilliant!!
David at 05:05AM, 2011/12/01.
sam
Hi,
How to change the color of arrow?

thanks in advance
sam at 05:32AM, 2012/01/01.
John
Is there a simple way to make individual tooltips into hyperlinks, rather than making the text within a hyperlink?
John at 06:31PM, 2012/01/04.
Neha
Hey its not working on IE7.
Neha at 05:46AM, 2012/01/10.
IveNoClue
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 04:05AM, 2012/03/11.
Andrew
Is anyone else having issues using this in chrome?
Andrew at 11:38PM, 2012/06/21.
qaisar imtiaz
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 01:30AM, 2012/07/18.
p1r4t0s
I fix the arrow:

arrowDiv.styles.zIndex=1005;

in the js file.
p1r4t0s at 08:34AM, 2013/02/20.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com