Email This Post Email This Post Print This Post Print This Post

Tooltips for Forms

Wed, Oct 17, 2007 – 2:25 pm

  1. 15 Responses to “Tooltips for Forms”

  2. I added on line 28 this code(and it works):
    tipdiv.onclick = function (aEvent){this.style.display=”none”;};
    stan sight
    you know what it does.
    thanks

    By jamSoft on Apr 2, 2008

  3. Nice addition jamSoft.

    It lets the user click on the tip box to dismiss it. It makes larger values for displayseconds more practical.

    By Stan Slaughter on Apr 2, 2008

  4. This isnt working for me. I am getting “error on page” when I click on the INPUT box.
    I have the INPUT fields in the form embedded in a TABLE, could this be confusing things?
    (I tried IE7 and Firefox3)

    By Garfy on Jul 24, 2008

  5. I noticed an error this morning myself. :)

    I’ve updated the code, but it was on line 29

    tipdiv.onclick = function (aEvent){this.style.display=”none”;};

    The quotes around the word “none” were not valid quote marks (they were some sort of invalid encoded character).

    Try this new version and see if it works better for you.

    P.S.

    I went a head and included the FindPosition function in here so you will not need to go hunting for it.

    By Stan Slaughter on Jul 24, 2008

  6. Am using Tooltips script but am gettingerror message:

    missing ; before statement
    [Break on this error] 16. function Tooltips(msg,displayseconds) { \n

    Any ideas what I am doing wrong?

    By Marten Gallagher on Feb 23, 2009

  7. Am getting this eror:

    missing ; before statement
    16. function Tooltips(msg,displayseconds) { \n

    What might I have done wrong?

    By Marten Gallagher on Feb 23, 2009

  8. Martin,

    With out seeing how your are using it, I’m not sure if I can help – but does your “msg” contain single or double quote marks ?

    Also were you using IE8 ? I’ve not tested it against that yet.

    By Stan Slaughter on Feb 23, 2009

  9. I have just worked it out and I am so embarrassed! I had copied from the web page and included all the line numbers!

    Aaarrgghh!

    But while you’re there…I want to do all the styling outside in an external css file…so have been trying to comment out the css style lines but it gets a bit tangled with the size of the box calculation bit. How would I go about setting the width to a fixed width and the allowing it to adjust the height normnallylike any block of html?

    By Marten Gallagher on Feb 23, 2009

  10. Oh and for information it works on IE8/XP and in IE8/Windows 7 and in Chrome/XP and Chrome/Windows 7

    By Marten Gallagher on Feb 23, 2009

  11. Oh, and Firefox/Mac OSX 10.4.11 and Safari/Mac OSX 10.4.11

    By Marten Gallagher on Feb 23, 2009

  12. “How would I go about setting the width to a fixed width”

    Change line 114

    from this:

    “var tip_width = (iNumChars * iCharWidth + 6 > iMaxWidth ) ? iMaxWidth : iNumChars * iCharWidth + 6;”

    to this:

    “var tip_width = XXXX”

    Where XXXX is the fixed width you want it to be.

    By Stan Slaughter on Feb 23, 2009

  13. And one last query – is itpossible to change something somewhere so the offset is to the right or to the left rather thannunderneath.A drop-down box obscures the tooltip.

    http://www.martengallagher.co.uk/experimenting/form.html

    Section 02 – hover over 02a1 red
    or
    Section 06 – hover over ‘Which building material do you prefer?’

    These would be places where the better ofset might be to the left of the origin. Any thoughts?

    Am very impressed with it thus far and am hoping to build it into my ‘search for the definitive form’ of which that page is the experimental base.

    By Marten Gallagher on Feb 23, 2009

  14. Glad you are finding it of some use. I tried to design it so it would be easy for any to customize and change the code to suit their needs. (One of the reasons there are almost as many comments as there is code :) )

    To make the tip appear to the right you need to just add the width of the form element to the tip_left position. You would do this under the current line 47. So this:

    // Add obj height to top position so tip box DIV will show up underneath “obj”
    tip_top += obj.offsetHeight;

    would become this:

    // Add obj height and width so tip box will show up underneath and to the right of “obj”
    tip_top += obj.offsetHeight;
    tip_left += obj.offsetWidth;

    By Stan Slaughter on Feb 24, 2009

  15. Thanks – I am not a programmner but am a logical person so I managed to fiddle and add three variables to the htmlcode part so that the tooltip can be thrown aroudn anywhere.

    My next step is to get it to draw messages from a standard bank of messages in a textfile. Will keep you posted.

    And yes you are right – the detialed comments helped a non-programmer sort through it logically.

    Latest incarnation:
    http://www.martengallagher.co.uk/css/tooltips.js

    By Marten Gallagher on Feb 24, 2009

  16. I found this site using [url=http://google.com]google.com[/url] And i want to thank you for your work. You have done really very good site. Great work, great site! Thank you!

    Sorry for offtopic

    By Irradcacifs on Nov 12, 2009

Post a Comment

StanSight is proudly powered by WordPress.