What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I adjust the Hover button location?

    Asked by fhpw on March 21, 2015 at 04:01 PM

    In developing my form, I included Hover button to help applicants. However, on the smaller fields, the Hover covers the field so users cannot enter information into the field. This is the same regardless of preview or full mode, or browser.  Is there a way to fix this?

     

    hover text below arrow pointing up move hover text reposition hover reposition popup re-position popup re-position hover move text under move tooltip
  • Profile Image
    JotForm Support

    Answered by abajan on March 21, 2015 at 08:27 PM

    Yes, there is. CSS can be added either in the form builder or designer to move the box and (if necessary) its arrow to another side of the box. Let me thoroughly examine the form, work on a solution and get back to you.

    Thanks

  • Profile Image

    Answered by fhpw on March 21, 2015 at 08:30 PM

    Okay.  Great.  As a work around, I removed the Hover for now and used the sub-text feature.

  • Profile Image
    JotForm Support

    Answered by abajan on March 22, 2015 at 05:55 AM

    Hi again,

    Please do the following:

    1. Click the Designer button:


    2.
     Click the CSS tab:


    3.
     Copy the following code and paste it into the CSS tab's work area

    .form-description {
    top: 70px !important;
    right: 36px !important;
    min-width: 160px;
    }

    .form-description-arrow {
    border-color: transparent transparent #CCC transparent;
    left: 62px;
    top: -22px;
    }

    .form-description-arrow-small {
    border-color: transparent transparent #F5F5F5 transparent;
    left: 65px;
    top: -13px;
    }

    The code in the work area of the CSS tab should now look similar to the following:

    (The first rule in the screenshot is arranged differently than in your form but its effect is the same.)


    4.
     Save the jotform:


    This solution applies to your jotform whose ID starts with the numbers  507772 (the last form you edited) but may also work with the one whose ID begins with 507987 (its clone).

    If you need further assistance with this, please let us know.


    Cheers

  • Profile Image

    Answered by fhpw on March 22, 2015 at 04:07 PM

    Works great.  I can apply this to all my forms.

    Thanks,

     

  • Profile Image
    JotForm Support

    Answered by abajan on March 22, 2015 at 08:16 PM

    Glad I could help. If there's anything else with which you need assistance, please inform us.

    Ciao for now :)