Struts2 : How to show a tooltip for each dropdown

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.

Answer 2

Using jQuery it can be solved easily

Call the following function in ui on onmouseoverbutton event

function addTitleAttributes(value){

$("#"+value+" option").each(function()
{
        $(this).attr('title',$(this).text());
});

}

Where value passed can be id of the select button

Answer 3

I suggest you too use tipsy, http://onehackoranother.com/projects/jquery/tipsy/ is the best solution that I've found, I am using it too.

Declare the paths to .js and .css files

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/tipsy.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/tipsy-docs.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/scripts/jquery.tipsy.js"></script>

 <script type='text/javascript'>
   $(function() {
    $('.example-1').tipsy();
    $('.north').tipsy({gravity: 'n', html: true });
    $('.south').tipsy({gravity: 's', html: true });
    $('.east').tipsy({gravity: 'e', html: true });
    $('.west').tipsy({gravity: 'w', html: true });
    $('.auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS, html: true});
    $('.example-fade').tipsy({fade: true, html: true});
    $('.example-custom-attribute').tipsy({title: 'id', html: true});
    $('.example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
    $('.example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
    $('.example-html').tipsy({html: true });
});
</script>

And the last thing, put your select between this span:

 <span class="south" style="cursor: pointer;" title=Your title"></span>

The class attribute in this span is for tooltip alignment, very strange, but it works inversed. No such a big problem, if you need to align it to north, just write south.