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.
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 < options.length; i++) {
options[i].title = options[i].innerHTML;
}
}
</script>
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.