How to setup help text for radio button with onmousehover

Question

i was new to visualforce development currently I'm trying to setup help text or display some information when users mousehover on the radio button options.

But when i try to fetch the value with action support it's showing null value on the logs

VF Page:

    <apex:repeat value="{!allQuestions}" var="qPreview" id="aQPreview">
    <div class="slds-box slds-theme--default" >
        <apex:outputPanel rendered="{!qPreview.renderSelectRow}" >
            <apex:selectRadio styleClass="convertToLDS" style="width:250px" rendered="{!qPreview.renderSelectRow}" value="{!qPreview.selectedOption}">
                <apex:selectOptions value="{!qPreview.rowOptions}"/>
                <apex:actionSupport event="onclick" action="{!checkSelectedValue}" reRender="none"/>
            </apex:selectRadio>
        </apex:outputPanel>
    </div>
</apex:repeat>

Apex Class:

global virtual with sharing class ViewSurController
{
    public String selectedOption {get;set;}
    public void checkSelectedValue()
    {        
        system.debug('Selected value is: ' + selectedOption);        
    }
}

Answer 1

While creating the SelectOption for the apex:selectRadio you can pass the HelpText as HTML string as title in the label parameter with this constructor SelectOption(value, label) of SelectOption Apex class. Don't forget to use setEscapeItem(false) for the SelectOptions.

VF Page

<apex:page controller="ViewSurController" lightningStylesheets="true">
    <apex:form>
        <apex:selectRadio layout="pagedirection">                        
            <apex:selectOptions value="{!rowOptions}"/>
        </apex:selectRadio>
    </apex:form>
</apex:page>

Controller

public class ViewSurController {
    public List<SelectOption>  rowOptions = new List<SelectOption> ();
    public List<SelectOption> getRowOptions() {
        List<SelectOption> opts = new List<SelectOption>();
        SelectOption sopt1 = new SelectOption('Option1','<span title="Help Option1">Option1</span>');
        sopt1.setEscapeItem(false);
        opts.add(sopt1);
        SelectOption sopt2 = new SelectOption('Option2','<span title="Help Option2">Option2</span>');
        sopt2.setEscapeItem(false);
        opts.add(sopt2);
        return opts;
    }
}

Screenshot:

Update - To implement inside a repeat tag you have to create a wrapper class and create the options with Help Text inside the wrapper class. Use the wrapper class list to render the radio buttons in VF page. Example as below.

VF Page

<apex:page controller="QuestionController" lightningStylesheets="true" >
    <apex:form >
        <apex:repeat value="{!allQuestions}" var="qPreview" id="aQPreview">
            <apex:selectRadio layout="pagedirection" id="myList">                        
                <apex:selectOptions  value="{!qPreview.rowOptions}"/>
            </apex:selectRadio>
        </apex:repeat>
    </apex:form>
</apex:page>

Controller

public class QuestionController {

    public List<Question> getAllQuestions() {
        List<Question> questions = new List<Question>();
        Question q1 = new Question('Q1OPT1','Q1OPT1HELP','Q1OPT2','Q1OPT2HELP');
        questions.add(q1);
        Question q2 = new Question('Q2OPT1','Q2OPT1HELP','Q2OPT2','Q2OPT2HELP');
        questions.add(q2);
        Question q3 = new Question('Q3OPT1','Q3OPT1HELP','Q3OPT2','Q3OPT2HELP');
        questions.add(q3);
        Question q4 = new Question('Q4OPT1','Q4OPT1HELP','Q4OPT2','Q4OPT2HELP');
        questions.add(q4);
        return questions;
    }        
    public class Question {
        public String selectedOption { get; set; }
        public List<SelectOption> rowOptions { get; set; }
        public Question(String opt1, String opt1hlp, String opt2, String opt2hlp) {
            rowOptions = new List<SelectOption>();
            SelectOption sopt1 = new SelectOption(opt1,'<span title="'+opt1hlp+'">'+opt1+'</span>');
            sopt1.setEscapeItem(false);
            rowOptions.add(sopt1);
            SelectOption sopt2 = new SelectOption(opt2,'<span title="'+opt2hlp+'">'+opt2+'</span>');
            sopt2.setEscapeItem(false);
            rowOptions.add(sopt2);
        }
    }    
}

Screenshot