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

    Hover text is hiding a question

    Asked by iMatter on October 14, 2015 at 07:26 AM

    The hover text associated with one of my fields pops up and blocks the field so the user can't actually input a response. I could change the field so the label is on the left instead of the top - and that would work - but isn't how I really want the field to look.

    Page URL:
    https://form.jotform.com/52046858986169

    Screenshot
    hiding a label and top left
  • Profile Image

    Answered by victor on October 14, 2015 at 11:58 AM

    Hi,

    You may move the hover text so your user will be able to view the field with:

    /* Override default position and width for hover text box */

    .form-description {

        max-width : 300px;

        top : 90px;

        left : 85px;

    }

     

    /* 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;

    }

    As you can see this will place the text right underneath the field.

    Please let us know if this helps.

    Regards

  • Profile Image

    Answered by KevinGarcia on October 14, 2015 at 11:58 AM

    Hi,

     

    To solve this, please in the Designer paste this CSS code : 

    .form-description {

        width : 150px;

        left : 180px;

        top : 25px;

    }

     

    I cloned your form and here is the link :

    https://form.jotform.co/52865091953868

     

    Please,contact if you need further assistance.

     

    Regards.

     

     

  • Profile Image

    Answered by iMatter on October 14, 2015 at 12:31 PM

    Thank you - I used the first response above - and it worked. I added a min-width of 200 as well - as that formatted the hover box better.

  • Profile Image

    Answered by victor on October 14, 2015 at 01:56 PM

    Glad we were able to assist. If you have any more questions or issues, please do not hesitate contacting us. We will be glad to assist.

    Regards