Can I customize hover text placement for each form element on mobile?

  • Profile Image
    Czajka_Ben
    Asked on April 03, 2019 at 11:30 PM

    I have a number of form elements that have hover text, and I have seen a number of forum posts on solving the issue of hover overlapping on mobile devices. The code I am using now affects all of my hover text which is either insufficient placement for some, or too much for the others. How can I manipulate the following code (or a completely different code that I can still place my text) to apply only to specific form elements? This code addresses the parameters I need to adjust on each element.

    @media screen and (min-width: 10px) and (max-width: 540px) {

    .form-description {

        max-width: 250px;

        top: -100px;

    }

    .form-description-content {

        font-size: 12px !important;

    }}


    Thank you,

    Dan

  • Profile Image
    Welvin
    Answered on April 03, 2019 at 11:58 PM

    You need to add the ID of the field if you'd like to apply the custom CSS codes to a specific field. To get the field ID, please follow our steps here https://www.jotform.com/help/146-How-to-find-Field-IDs-Names.

    For example, the first field has the ID of id_3. You need to do the CSS like:

    #id_3 .form-description {

    max-width: 250px;

    top: -100px;

    }

    Please try and let us know if you cannot get it to work.