Geek Answers Handbook

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

I have this selectats2 struts tag, where parameters is a list of Item objects. Let say that the class java bean class has the following 3 properties: itemId, itemLabel, itemDescription .

My select tag looks like 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 drop-down menu when the user views this option. The text to fill this tooltip is stored in the itemDescription property of my java bean class

I know that you can specify tooptip for the select tag, but this is not what I need, since each parameter / element has a different description.

I currently have a special javascript tooltip, and I would like to use this function if possible. This is how I will use this function if the items are listed in the table:

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

Does anyone know what would be the best solution to show description as a tooltip every time a user hangs over an option?

+4
source share
3 answers

There are several ways to do what you want. The fastest for me will just write 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 example uses the html5 header attribute. The nice thing is that you get a tooltip in most modern browsers without javascript.

Replace: "valueToReturn", "toolTip" and "itemInListToShow" with the corresponding ognl expressions for the values ​​in "collectionOfSomething"

Another way to solve this problem would be to use jQuery (any JS library) and there will be something like this.

1) Put the html list on the page using hints, but in CSS style so that it is not visible.

2) Use jQuery (or the preferred JS library) to bind the mouse to the event for each item in the drop-down list, which will show the tooltip from the same index in the hidden list.

+6
source

I suggest you use tipsy too, http://onehackoranother.com/projects/jquery/tipsy/ - the best solution I found, I use it too.

Declare 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 my tooltip yo'?" }); $('.example-html').tipsy({html: true }); }); </script>

And finally, put your choice between this range:

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

The class attribute in this range is designed to align the tooltip, very strange, but it works the other way around. There is no such big problem, if you need to align it to the north, just write to the south.

+4
source

Using jQuery is easily solved

Call the following function in ui on the onmouseoverbutton event

function addTitleAttributes (value) {

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

}

If the passed value can be the identifier of the select button

+1
source

More articles:


All Articles