How to add tooltip to f:selectItems

For example the f:selectItems component doesn't support the title attribute in some versions of JSF.

Would it be possible to replace JSF Components by their plain HTML counterparts using JSFC and do something like this?

   <select jsfc="h:selectOneMenu" value="#{cc.data}">
     <option jsfc="f:selectItems" value="${cc.listItems}" var="item" title="#{item.tooltip}"></option>
   </select>

instead of

   <h:selectOneMenu value="#{cc.data}">
     <f:selectItems value="#{cc.listItems}" />
   </h:selectOneMenu>

Doing exactly so, replacing the latter by the above, I'm getting "<f:converter> Parent not an instance of ValueHolder: javax.faces.component.html.HtmlPanelGroup" Facelet TagExceptions

Solution

Would it be possible to replace JSF Components by their plain HTML counterparts using JSFC and do something like this

Nope. Ultimately, such a HTML element with jsfc attribute will be turned into a true JSF component in the JSF component tree and only the attributes supported by the component in question would be parsed and set as component attribute. The title attribute isn't among the supported attributes of UISelectItem component. I'm not sure what exactly you mean with "some versions of JSF". The standard JSF API already doesn't support it in first place. JSF spec issue 529 describes this shortcoming and is currently still open.

If you're using JSF 2.2, make use of passthrough attributes. You only need to replace <f:selectItems> by <c:forEach><f:selectItem>, see also Using f:selectItems var in passtrough attribute

<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

<c:forEach value="#{bean.items}" var="item">
    <f:selectItem itemValue="#{item}" a:title="#{item.tooltip}" />
</c:forEach>

Based on your question history you seem to be not using JSF 2.2 yet. If you can't upgrade, you basically need a custom renderer for <h:selectOneMenu>. While creating the custom renderer, you could make use of the unused(!) description property of the UISelectItem class. I've answered this before on a similar question targeted at <p:selectManyCheckbox>: Primefaces tooltip for p:selectManyCheckbox or other p:selectMany*/One*.

<f:selectItems ... var="item" itemDescription="#{item.tooltip}" />

Noted should be that creating the custom renderer for <h:selectOneMenu> is a pain, particularly if you intend to be JSF implementation independent. Theoretically, a custom ResponseWriter should be able to catch this, but unfortunately, the <h:selectOneMenu> only passes itself when writing <option>, instead of the UISelectItem in question.