How can I set individual hover texts for each radio button option?

Hello

Would very much appreciate your help with my form as I am not very good at this!

I have created the form:

https://eu.jotform.com/build/72775903784369

On page 3 I have attempted to follow instructions to add individual hover text to the field elements - by finding the ID (which I think is Id_13), copying in a code from a previous forum question on the same subject.  However I can't seem to get the hover text working for each of the fields.

Could you please point me in the direction of where I have gone wrong and what I can do to try and get this working?

Thank you so much for your help in advance.

Emma

I'm currently working on your form and will update you here as soon as I'm done.

The current CSS Codes you have on your Form Builder have a lot of errors:

1. The CSS selectors you're using are for checkboxes and not for radio buttons.

2. There are typos in the codes, perhaps unintended and accidental when you pasted and edited them.

3. And there are some unclosed sections too.

Before you start, I recommend you delete all the codes from LINE #9 until the last line.

Once you're done, paste these codes, as is, on the CSS tab:

#id_13 .form-radio-item:nth-child(1):hover span:after {

    content: "The cleaning contract on site is fulfilled by Mitie.  Please use this area to raise any non-urgent requests for cleaning support such as areas to be cleaned, quotes for additional cleans, general cleaning enquiries or to report an area not cleaned to standard.For raceday support, please log your call with control to ensure there is a record of your request and any follow up action is documented.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

#id_13 .form-radio-item:nth-child(2):hover span:after {

    content: "The movement of waste on site is undertaken by Mitie. Please use this area to request non-urgent support such as requests for additional bins, request specialist recycling bins (such as wood, metal), or to report bins that need emptying.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

#id_13 .form-radio-item:nth-child(3):hover span:after {

    content: "This area is for Sodexo / 1711 employees to request H&S support or report accidents / near misses. In the event of an accident or near miss that requires immediate resolution on non-racedays, please also inform your line manager for additional, immediate support.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

#id_13 .form-radio-item:nth-child(4):hover span:after {

    content: "Use this form to log maintenance requests on CATERING equipment. For all other maintenance requests such as lighting, heating, plumbing please use the ARL Facilities form.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

#id_13 .form-radio-item:nth-child(5):hover span:after {

    content: "This area is for 1711 / Sodexo employees to log support requests with ARL Facilities Department. It is helpful for enquires to go through this form in order to track support requests, to ensure there is a record and also to better understand repeat issues for 1711 to then monitor the support back from ARL.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

#id_13 .form-radio-item:nth-child(6):hover span:after {

    content: "This area is for 1711 / Sodexo employees to log pest control support requests with ARL Facilities Department.  It is helpful for support requests to go through this form in order for 1711 / Sodexo to have a record and to ensure the are responded to. Additionally to understand repeat requests to shape better planning and preventative measures.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

#id_13 .form-radio-item:nth-child(7):hover span:after {

    content: "Use this option for all other support queries / requests.";

    position: absolute;

    width: auto;

    left: 40%;

    right: 5%;

    padding: 2px 6px;

    margin-top: -6px;

    background: #eee;

    border: 3px solid #aaa;

    border-radius: 3px;

}

Result: https://www.jotform.com/72797543443971

Oh wow.  Thank you so much.  Yes - my error  are accidental and unintended - to be honest because I am trying to figure it out and not doing a very good job.

What you point out now makes perfect sense but I would never have got there on my own so thank you so much.

Have followed your instructions and works perfectly.

Jot form is amazing and that support from the forums and yourself is the best - I appreciate it very much.

Anytime 😉 And thanks for the warm feedback. This surely motivates us to do even better next time. Enjoy your weekend!