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 Do I Move and/or Reduce the Width of a Field's Hover Text, so That It Does Not Hide Any Part of the Field?

    Asked by stevepoulson on November 06, 2015 at 03:53 AM

    The "0700-0900" and "0900-1100" fields on "Sunday" cannot be ticked because the hover text appears over them. Other than moving the hover text to the main question, is there a way to stop this? Is there a way to edit the size/shape of the hover text box?

    (To see the matrix on this form, the question "Please select" needs to be equal to "I would like to use the Radio Christmas Studio)

     

    THanks

    Page URL:
    https://form.jotformeu.com/stevepoulson/radiochristmaspresenter

    Screenshot
    move hover text re-position hover reduce the width change the width
  • Profile Image
    JotForm Support

    Answered by abajan on November 06, 2015 at 05:28 AM

    Hi Steve,

    The hover text can be re-positioned above the matrix (with its arrow pointing down instead of to the left) or it can be kept in its current location with a reduced width. The latter solution was used in this clone. To have the hover text in your jotform look the same, please do the following:

    1. Copy the following rule to your computer clipboard:

    #id_13 .form-description {
       max-width : 100px;
    }


    2. Load the form into the form builder and click the Design button:

     


    3. Go the the CSS tab:


    4. In the tab's work area (indicated by the arrow above) paste the rule that was copied in Step 1

    5. Save the change:

     

    In my clone I also changed the alignment of the matrix's label from Auto to Top so that it would appear in just one line. To do the same with your form, click the matrix and then click the Label Align button and select Top:


    If you would like further help with anything, please inform us.

    Thanks

  • Profile Image

    Answered by stevepoulson on November 06, 2015 at 06:00 AM

    That's sorted it, thanks very much!

     

     How do I do the same thing with this other form: https://form.jotformeu.com/stevepoulson/radiochristmastechform

     

    I've tried playing around, but with no success!

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 06, 2015 at 07:47 AM

    Hi again,

    For that second form, the selector in the rule you're using to target the hover text is incorrect. It should be #id_13, not #iAm13 ("iAm13" is the field name but it's the ID that's needed. Please see this guide. While the properties of the matrix doesn't show "id_13", it's the "13" which is the important part.) Changing it will allow the rule to take effect. However, while this will reduce the width, the hover text will still obscure part of the matrix. To move the hover text to the right, another declaration will need to be added to the rule, so that it becomes

    #id_13 .form-description {
       max-width : 100px;
       right : -100px;
    }

    Note the elements highlighted in red.

    If done correctly, the hover text for that form's matrix should appear like that in this clone.

    Do let us know if you need further assistance.

    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on November 06, 2015 at 12:23 PM

    I got your reply but for some reason it didn't show up here in the thread. So, I've repeated it below:

    "Thanks very much, that is now all sorted, and I think I understand how it works now!

    (Or at least a little bit more...)"


    You're most welcome. Glad we could help. If you need further assistance with this or anything else, we'd be happy to provide it.

    Enjoy the remainder of your day.