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?

  • stevepoulson
    Asked on November 6, 2015 at 3: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

    Jotform Thread 699147 Screenshot
  • abajan Jotform Support
    Replied on November 6, 2015 at 5: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:

    How Do I Move and/or Reduce the Width of a Fields Hover Text, so That It Does Not Hide Any Part of the Field? Image 1 Screenshot 50

     


    3. Go the the CSS tab:

    How Do I Move and/or Reduce the Width of a Fields Hover Text, so That It Does Not Hide Any Part of the Field? Image 2 Screenshot 61


    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:

    How Do I Move and/or Reduce the Width of a Fields Hover Text, so That It Does Not Hide Any Part of the Field? Image 3 Screenshot 72

     

    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:

    How Do I Move and/or Reduce the Width of a Fields Hover Text, so That It Does Not Hide Any Part of the Field? Image 4 Screenshot 83


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

    Thanks

  • stevepoulson
    Replied on November 6, 2015 at 6: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

  • abajan Jotform Support
    Replied on November 6, 2015 at 7: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

  • abajan Jotform Support
    Replied on November 6, 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.