Create different hover text for each Multiple Choice options

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

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!!!

This is a re-post of a comment on How to Inject Custom CSS Codes
Jed_C
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?

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
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!
Kiran

Jotform Support

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.

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

Hope this information helps!
Mountaineers
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.

Thanks!
Michael

Jotform Support

Answered on February 05, 2020 at 01: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
Answered on February 05, 2020 at 01:59 PM

This is perfect! Thanks Mike.
Mountaineers
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?
Welvin

Jotform Support

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.