Create different hover text for each Multiple Choice options

  • Bhare
    Asked on February 4, 2020 at 9: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.

     

    ELIGIBILITY:

    • 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.

     

    SELECTION COMMITTEE:

    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.

     

    AWARD:

    $1,100 for 2020-2021

    Depends on fund availability

     

    Thanks!!!

  • Jed_C
    Replied on February 5, 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 Screenshot 10

    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. 

  • Bree
    Replied on February 5, 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! 

  • Kiran Support Team Lead
    Replied on February 5, 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. 

    https://www.jotform.com/help/316-How-to-Show-or-Hide-Fields-Base-on-User-s-Answer

    Hope this information helps! 


  • Mountaineers
    Replied on February 5, 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.

    Thanks!

  • Mike_G JotForm Support
    Replied on February 5, 2020 at 1:43 PM

    Thank you for updating us.

    But are you perhaps looking for something like this?

    https://form.jotform.com/200355513133038

    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.

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Mountaineers
    Replied on February 5, 2020 at 1:59 PM

    This is perfect!  Thanks Mike.

  • Mountaineers
    Replied on February 5, 2020 at 2: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?

  • Welvin Support Team Lead
    Replied on February 5, 2020 at 4: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.