How can I alter the location of the Hover Text to be more suitable for my form?

  • Profile Image
    danacohen321
    Asked on July 29, 2019 at 02:16 PM

    I have recently added hover text to my form. Initially, my issue was that the text was blocking the field for the options, but I fixed that by following this advice https://www.jotform.com/answers/768087-Hover-text-is-clipped-and-not-displayed-completely

     

    Before:

     1564423894Capture1.PNG

    After:

    1564424020Capture2.PNG

     

    This is better since people can now enter their answer, but it's still not ideal. Is there a way to make the hover text appear above or below the prompt?

     

    Also, this method still leave areas of my form like this looking a bit odd. In the following image, the part that is highlighted is where I am hovering. The text appears quite far away.

    1564424121Capture3.PNG

     

    This is specifically regarding my Marketing Collateral Request form. Thank you!!

  • Profile Image
    jherwin
    Answered on July 29, 2019 at 03:08 PM

    Please try to inject this custom CSS code to your form:

    .form-description {
        right : -50px!important;
        width : 200px!important;
        max-width:200px!important;
        height : 65px;
        top : -70px!important;
    }
    .form-description-content {
        height : 40px!important;
        width : 180px!important;
    }

    Guide: How-to-Inject-Custom-CSS-Codes
    1564427264aboive.png
    Please give it a try and let us know how it goes.

  • Profile Image
    danacohen321
    Answered on July 31, 2019 at 09:13 AM

    That works, thank you! Is there a way to change the appearance of the hover text box?

  • Profile Image
    AndrewHag
    Answered on July 31, 2019 at 10:34 AM

    Yes, could you please tell what are all the styles that you wish to apply so we can provide you the code?

  • Profile Image
    danacohen321
    Answered on July 31, 2019 at 02:47 PM

    If the arrow could just be on the bottom side of the box, that would be ideal. Thank you!

  • Profile Image
    jherwin
    Answered on July 31, 2019 at 03:13 PM

    Please try these CSS codes:

    .form-description-arrow {
    border-color: #CCC transparent transparent transparent;
    left:62px;
    top:69px;
    }
    .form-description-arrow-small {
    border-color: #F5F5F5 transparent transparent transparent;
    left:65px;
    top:64px;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    danacohen321
    Answered on August 07, 2019 at 01:35 PM

    This looks great, thank you!