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 10:55AM, 2011/03/24.

1 2 3 4 5

hey, doesn't it works in IE 9?

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

Admin comment

1 2 3 4 5

Fabio,The IE9 problem has now been solved

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

1 2 3 4 5

The error goes out by ie6.

ryu at 06: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 02:21PM, 2011/06/30.

1 2 3 4 5

Thanks so much for this :)

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

1 2 3 4 5

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

swathi at 06: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 06:58PM, 2011/09/20.

1 2 3 4 5

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

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

1 2 3 4 5

Brilliant!!

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

1 2 3 4 5

Hi,
How to change the color of arrow?

thanks in advance

sam at 12: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 01:31AM, 2012/01/05.

1 2 3 4 5

Hey its not working on IE7.

Neha at 12: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 10:05AM, 2012/03/11.

1 2 3 4 5

Is anyone else having issues using this in chrome?

Andrew at 05: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 07:30AM, 2012/07/18.

1 2 3 4 5

I fix the arrow:arrowDiv.styles.zIndex=1005;in the js file.

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

1 2 3 4 5

Официальный сайт статистики COVID в Российской федерации - Coronavirus-Control.ru, добавил аналитические данные от авторитетных экспертов и докторов о COVID, со ссылками на государственные источники Роспотребнадзор - https://pandemiya-coronavirusa.ru/ Эта информация для меня стала крайне полезна, добавила в закладки.

ZrtGC at 08:43PM, 2021/08/14.

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 17:11, 04-26-2024.