Create different hover text for each Multiple Choice options

  • Profile Image
    Asked on February 04, 2020 at 09:42 PM

    I'm trying to add CSS code for each of the answers for the "Non Sport Specific Scholarships. I've tried entering code for the first one, but nothing is appearing. Are you able to help me get the first one set up to include the following content:


    Established with the Western Colorado University Foundation to perpetuate the memory of William Charlesworth, a 1954 graduate of Western. To provide financial assistance to student-athletes pursuing majors in mathematics or related natural sciences.



    • Major: Pursuing a math or science major

    • Need: Demonstrates a need for financial assistance

    • Athletics: Demonstrates an interest and is active in organized athletics

    • Year in School (after completion of current spring semester): Incoming freshmen accepted to Western to Seniors are eligible; preference given to incoming freshmen

    • Residence: Preference given to applicants from Delta County, the Western Slope of Colorado, and Colorado.

    • Other: Preference given to applicants whose study time is limited by family obligations or the need to earn income.



    Chaired by the chairman of the Department of Natural and Environmental Sciences, includes a representative from the Athletic Department appointed by the Athletic Director, and a representative from the Mathematics Department.



    $1,100 for 2020-2021

    Depends on fund availability



    This is a re-post of a comment on How to Inject Custom CSS Codes

  • Profile Image
    Answered on February 05, 2020 at 12:39 AM

    I'm sorry, but I didn't quite get your question. Are you trying to add the content inside the checkbox field?

    1580881131Athletic Scholarship Applicati

    The information you've provided was already in the PDF below the checkbox field so I'm not sure what you are trying to do.

    Would you mind clarifying it? Looking forward for your response. 

  • Profile Image
    Answered on February 05, 2020 at 11:17 AM

    I was hoping to have content for each of the multiple choice answers that describes the scholarship when you hover over the option.  If this is possible, we would delete the attached PDF.  Please let me know if this is something that can be done in JotForm.  Thanks for your help! 

  • Profile Image
    Answered on February 05, 2020 at 12:12 PM

    We are sorry it is not possible to display the hover text based on the selection of Checkbox field. However, you may consider adding multiple checkbox fields to display each option separately and the description in Text fields below the respective checkbox option. The description text can be displayed by setting up show/hide conditions.

    Hope this information helps! 

  • Profile Image
    Answered on February 05, 2020 at 12:18 PM

    Okay.  Thanks for helping me with this.  I don't think the show/hide feature will work for what we need, so perhaps I'll just keep the PDF on the form.


  • Profile Image
    Answered on February 05, 2020 at 01:43 PM

    Thank you for updating us.

    But are you perhaps looking for something like this?

    Hover on each option to see different hover text.

    The hover texts were created using custom CSS codes. But, may I remind you that although it may work for simple texts, as in my example, issues may occur when creating it with texts with a specific format such as in your example.

    You can create a clone version of the form in your account so you can examine it.

  • Profile Image
    Answered on February 05, 2020 at 01:59 PM

    This is perfect!  Thanks Mike.

  • Profile Image
    Answered on February 05, 2020 at 02:49 PM

    One more question...can you please let me know with the CSS code is to create a new paragraph or a line break?

  • Profile Image
    Answered on February 05, 2020 at 04:05 PM

    If the question is still related to the hover text added by custom CSS method, you can't. The text cannot be formatted by adding another custom CSS codes. You also cannot add HTML coding in it. The CSS won't be able to render the HTML in the form. 

    I'll see if my colleagues can think of a better workaround. I'm thinking text field and float it with custom CSS codes.