How to add tooltip for selectitem in selectoneradio

Question

I want to add tooltip for selectitem while doing mouse over on each item.

Here is my code

<h:selectOneRadio id="class" styleClass="bold" rendered="# {bean.campusObject.campus=='C'}" value="#{bean.type}">
    <f:selectItem itemLabel=" Dept " itemValue="1" />
    <f:selectItem itemLabel="Course " itemValue="2" />
    <f:selectItem itemLabel="Course with Dept" itemValue="3" />
    <f:selectItem itemLabel="Specialization" itemValue="4" itemDisabled="#{!bean.level.equals('PG')}"/>
                                <f:ajax render="cours" ></f:ajax>
                                </h:selectOneRadio>

did you try something like in the example site [PrimeFaces Site](http://www.primefaces.org/showcase/ui/overlay/tooltip/tooltipOptions.xhtml) — Yagami Light, Feb 24 '17 at 09:45
Does this answer your question? [How to add tooltip to f:selectItems](https://stackoverflow.com/questions/25511351/how-to-add-tooltip-to-fselectitems) — Vasil Lukach, Jul 15 '20 at 14:56

score 0 · Answer 1 · answered Feb 24 '17 at 09:52

You can do it by implementing a custom layout for the selectOneRadio component as follows:

<p:selectOneRadio id="radioGroup" layout="custom"
            value="#{bean.radioValue}"  disabled="#{bean.disabled}">
            <f:selectItems value="#{bean.radioItems}" var="r"
                itemLabel="#{r.label}" itemValue="#{r}" />
            <p:ajax />
        </p:selectOneRadio>

    <h:panelGrid columns="2" styleClass="radioLayout">
        <c:forEach var="r" items="#{bean.radioItems}" varStatus="status">
            <p:radioButton for="radioGroup" disabled="#{bean.disabled}"
                itemIndex="#{status.index}" id="radio${r.id}" />
            <h:panelGroup>
                <p:outputLabel value="#{r.label}" title="Your tooltip" />
            </h:panelGroup>
        </c:forEach>
    </h:panelGrid>

How to add tooltip for selectitem in selectoneradio

1 Answers1