How to style the Hover Text

  • Profile Image
    medtestdx
    Asked on July 26, 2011 at 06:13 PM

    Hi, I added hover text to my form, but it was inconsistent. Some of the bubbles would appear far to the right, others right over the box that you are trying to enter text into. So I deleted all the hover text, but it still appears on the form?  Thanks

  • Profile Image
    NeilVicente
    Answered on July 26, 2011 at 06:26 PM

    Hi,

    Did you save your form after deleting the hover text's? Apparently the hover text's are still in your form when I clicked on the fields and then clicked the Hover Text button.

    To remove them, clear all the characters in the text area then click OK. Afterwards, save your form.

    Please do the steps I mentioned above then get back to us if problem still persists.

    Thanks!


    Neil

  • Profile Image
    medtestdx
    Answered on July 26, 2011 at 06:46 PM

    That’s weird, I’ve deleted these fields a few times. So I just deleted them again (screen shot at http://screencast.com/t/71uQ82M36) and saved the form and they are still showing up in my form online? I’ve refreshed the page a number of times. When I go into the interface, there is nothing in the hover text, I’ve deleted everything. I’ve saved the file a number of times. Here’s a screen shot at http://screencast.com/t/umfboICH for the Last Name field showing it’s empty, but the balloon appears? I’ve tried different browsers, it makes no difference.

    I’m using the embed code as follows:

    <div id="form">

                <script src="//form.jotform.com/jsform/12064745157"></script>

                </div>

    Tom

  • Profile Image
    NeilVicente
    Answered on July 26, 2011 at 07:04 PM

    Hi Tom,

    Your Captcha field still has a hover text inside the Form Builder. As for the embedded form, the hover text for the "Reason for contacting" field still shows on my end even if it has been removed in the Form Builder.

    This could be an issue with update delays on our CDN (Content Delivery Network). Please try this embed codes instead:

    <script src="//www.jotform.com/jsform/12064745157"></script>

    Or you can just wait for it to get updated.

    Let us know how it works for you.


    Neil

  • Profile Image
    medtestdx
    Answered on July 26, 2011 at 10:16 PM

    I got rid of the hover text in the captcha field, thanks. Did something change from times past? I used to be able to save a form and see the results immeditely.

    I used the new code you provided and it worked.

    Did you know that your code doesn't validate? By adding type="text/javascript" into the code it validates. e.g. <script type="text/javascript" src="//www.jotform.com/jsform/12064745157"></script>

    Thanks,
    Tom

  • Profile Image
    abajan
    Answered on July 26, 2011 at 10:27 PM

    Hi Tom

    Thanks for asking. Forms at the http://form.jotform.com... addresses  take longer to update than those at http://www.jotform.com. It's an issue we're tryng to resolve.


    ~ Wayne

    P.S. Yes, we're aware that the code isn't properly formatted for validation. That will possibly be corrected in the next update of the form builder.

  • Profile Image
    medtestdx
    Answered on July 26, 2011 at 11:08 PM

    I've been using http://www.jotform.com/?formID=12064745157. Tom

  • Profile Image
    brx250
    Answered on July 27, 2011 at 04:33 AM

    Hi Tom,

    If you do have other questions or if you need further clarifications, please let us know. We will be more than happy to help you with your issues.

    _____________________________________________

    Albert | JotForm Support

  • Profile Image
    abajan
    Answered on July 27, 2011 at 06:58 PM

    Hi again Tom

    This thread actually got somewhat off topic and your actual desire was to have the hover texts, so long as they were correctly positioned. This can be done with injected CSS.

    However, we need to tidy up the appearance of a couple of the fields. The Phone Number's label is too far from its text box and the Comments' text area is too wide. Here's how to correct those:

    1. In a separate tab or window, load the form in the form builder and click the Form Styles tab

    2. Click the Label Width button, reduce the amount to 100 and click OK

    3. Click the Comments field, click the Columns button and reduce the number to 62


    Now, replace the hover texts you originally had, select all [Ctrl+A] of the following CSS, copy it [Ctrl+C] and paste it [Ctrl+V] into the Inject Custom CSS section of the form's Preferences:

    /* Override default position and orientation
    of outer arrow on hover text box */
    .form-description-arrow {
    border-color:transparent transparent #CCC transparent;
    left:7px;
    top:-24px;
    }

    /* Override default position and orientation
    of inner arrow on hover text box */
    .form-description-arrow-small {
    border-color:transparent transparent #F5F5F5 transparent;
    left:10px;
    top:-14px;
    }

    /* Hover text position for all but
    Phone Number, Comments and CAPTCHA */
    #id_1 .form-description,
    #id_2 .form-description,
    #id_4 .form-description,
    #id_3 .form-description,
    #id_6 .form-description,
    #id_7 .form-description,
    #id_8 .form-description,
    #id_9 .form-description,
    #id_10 .form-description {
    top:70px;
    left:12px;
    }

    /* Phone Number hover text position */
    #id_5 .form-description {
    top:50px;
    left:118px;
    }

    /* Revert outer arrow to default position and orientation
    for Comments and CAPTCHA hover texts */
    #id_11 .form-description-arrow,
    #id_13 .form-description-arrow {
    border-color:transparent #CCC transparent transparent;
    left:-24px;
    top:7px;
    }

    /* Revert inner arrow to default position and orientation
    for Comments and CAPTCHA hover texts */
    #id_11 .form-description-arrow-small,
    #id_13 .form-description-arrow-small {
    border-color:transparent #F5F5F5 transparent transparent;
    left:-14px;
    top:10px;
    }

    /* Comments hover text position */
    #id_11 .form-description {
    top:30px;
    left:374px;
    }

    /* CAPTCHA hover text position */
    #id_13 .form-description {
    top: 28px;
    left:192px;
    }


    I don't know which of the fields originally had hover text but the above rules will take care of all of them. For your convenience, I have included comments in case you need to fine tune anything.

    You can get a good basic understanding of CSS hereFirebug was used to find out the IDs of the fields.

    Hopefully, you found this post useful. If you require additional help positioning the hover texts and arrows attached to them, please feel free to ask for it. Our team will gladly assist you.


    ~ Wayne

  • Profile Image
    mccyo
    Answered on August 17, 2011 at 02:46 PM

    Wayne - I'm having a similar issue.  I had hover text attached to several fields and have since changed most of them to conditional fields - I'd much rather hover text. Can you help?

    <script src="//form.jotform.com/jsform/12282541250"></script>

  • Profile Image
    abajan
    Answered on August 17, 2011 at 07:23 PM

    Hi Ann

    I've cloned your form and made some changes to it. Seeing that no submissions or uploads are associated with the original, if you are okay with the way my clone of it looks and functions, I would suggest that you delete the original form, clone my clone of it and use it as your own.

    That's an awful lot of cloning for one sentence! Just in case it all sounds too confusing, just delete your form, clone the form at http://www.jotform.com/form/12283013395 and use it.

    If you need additional assistance with this or anything else related to your forms, please let us know. Our team will be glad to help you however we can.

    Thanks.


    ~ Wayne