Struts2 : How to show a tooltip for each dropdown option in a select tag?

Question

I have this struts2 select tag where the options are a list of Item objects. Let's say the Item java bean class has the following 3 properties: itemId, itemLabel, itemDescription.

My select tag looks likes this:

<s:select headerKey="" 
  headerValue="Select Item"
  list="myModel.itemsList"
  listKey="itemId"
  listValue="itemLabel"
  name="selectedItem" />   

I would like to show a tooltip for each option in the dropdown menu whenever the user hoovers over that option. The text to populate that tooltip is stored in the itemDescription property of my java bean class

I know you can give a tooptip to the select tag, but that is not what I need, since each option/item has a different description.

Currently I have a custom javascript tooltip and I would like to use this function if possible. This is how I would use the function if the items would be listed in a table:

<td>
    <span class="tooltip" onmouseout="tooltip.hide();"
      onmouseover="tooltip.show('<s:property value="item.description" />');">
        <s:property value="item.label" />
    </span>
</td>

Does anybody know what would be the best solution to show the description as a tooltip everytime the user hovers over an option?

Answer 1

There are a number of ways to do what you want. The fastest for me would just be writing html:

    <select name="selectedItem">
        <s:iterator value="collectionOfSomething">
            <option value="<s:property value="valueToReturn"/>" title="<s:property value="toolTip"/>">
                <s:property value="itemInListToShow"/>
            </option>
        </s:iterator>
    </select>

The above uses the html5 title attribute, the nice thing about this is that you get a tooltip in most modern browsers without any javascript.

Replace: "valueToReturn", "toolTip" and "itemInListToShow" with appropriate ognl expressions for values in "collectionOfSomething"

Another way of solving this would be with jQuery (any JS library would do) and would go something like this.

1) Put an html list on the page with the tool tips but styled with CSS so it is not visible.

2) Use jQuery (or JS library of preference) to bind a mouse over event to each item in the drop down list, which will show the tool tip from the same index in the hidden list.