ToolTip for each SelectOneMenu Items in jsf

Question

My requirement is to provide a tooltip for every option in the SelectOneMenu because label of option is so large that it's not possible to provide such a large size SelectOneMenu .So the label is cutting. Thats why i need tooltip to show the whole value on mouse over of the options in the SelectOneMenu .

Any ideas will be appreciated.

Answer 1

You can use javascript. Assume your selectOneMenu as below.

<h:form id="form1">
    <h:selectOneMenu id="combo1">
        <f:selectItem itemLabel="First Label"/>
        <f:selectItem itemLabel="Second Label"/>
        <f:selectItem itemLabel="Third Label"/>
    </h:selectOneMenu>
</h:form>

Add this script at the top of your page.

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

Answer 2

If you are using a list of "javax.faces.model.SelectItem" you can pass the description attribute to show a tooltip for each and every option.