<f: selectItems> JSF tag hint custom attribute

Question

Is it possible to add the "title" attribute to a tag in JSF, for example:

<f:selectItems value="#{foo.fooList}" title="{foo.fooDescription}"/> 

Generated HTML:

 <select> <option value="foo1" title="description1">foo ex1</option> <option value="foo2" title="description2">foo ex2</option> </select> 

Answer 1

I do not have an elegant solution, but it can be done. I assume JSF 2+ and Facelets VDL.

For managed bean Foo :

 @ManagedBean @RequestScoped public class Foo { private List<SelectItem> fooList = Arrays.asList( new SelectItem("value1", "label1", "description1"), new SelectItem("value2", "label2", "description2")); public List<SelectItem> getFooList() { return fooList; } } 

You can use JavaScript to set the title attribute on the DOM node:

 <h:selectOneMenu binding="#{requestScope.fooSelectOne}"> <f:selectItems value="#{foo.fooList}" /> </h:selectOneMenu> <script> (function() { var selectName = '#{requestScope.fooSelectOne.clientId}'; var kids = document.getElementsByName(selectName)[0] .getElementsByTagName("option"); var index = 0; <ui:repeat value="#{foo.fooList}" var="_opt"> kids[index++].title = '#{_opt.description}'; //TODO: escape this </ui:repeat> }()); </script> 

Answer 2

To generate the title attribute in the generated options , you can simply use the passthrough attributes, like this:

 <f:selectItems value="#{values}" p:title="Your title here"/> 

Answer 3

I think that for the f:selectItems there is no such ( title ) attribute. You have this attribute in a regular option tag in HTML , but not in jsf . I think you should use a simple select tag instead of selectOneMenu to get the title value.

Answer 4

Suppose your <h:selectOneMenu is below.

 <h:form id="myForm"> <h:selectOneMenu id="myCombo"> <f:selectItems value="#{foo.fooList}"/> </h:selectOneMenu> </h:form> 

Now in window.onload you can iterate through option and add title as shown below

 <script> window.onload = function() { var options = document.getElementById("myForm:myCombo").options; for(var i = 0; i &lt; options.length; i++) { options[i].title = "description" + i; } } </script> 

Answer 5

the itemDescription attribute will not appear in seam 2.2.

A better solution would be to use javascript to display a tooltip for each select element.

  <script type="text\javascript"> function getTooltip(id){ var options = document.getElementById(id).options; for(var i = 0; i &lt; options.length; i++) { options[i].title = "description" + i; } } </script> 

if your identifier is generated dynamically or in another way, for example,

  <rich:dataTable value="#{mybean.list}"> <h:selectOneMenu value="#{mybean.selectedValue}" onmouseover=getTooltip(this.id)> <f:selectitems value="#{mybean.selectlist}"> </h:selectOneMenu> </rich:datatable> 

This solution will work for all dynamically generated identifiers, as well as simple