Struts2:如何在select标记中为每个下拉选项显示工具提示? [英] Struts2 : How to show a tooltip for each dropdown option in a select tag?

问题描述

我有这个struts2 select标记，其中的选项是Item对象的列表. 假设Item java bean类具有以下3个属性:itemId, itemLabel, itemDescription.

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" />   

每当用户将鼠标悬停在该选项上时，我都会在下拉菜单中显示每个选项的工具提示.用于填充该工具提示的文本存储在我的Java bean类

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

我知道您可以给select标签添加tooptip，但这不是我所需要的，因为每个选项/项目都有不同的描述.

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.

当前，我有一个自定义的javascript工具提示，如果可能的话，我想使用此功能.如果项目将在表中列出，这就是我将如何使用该函数的方法:

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>

有人知道每次用户将鼠标悬停在一个选项上时，将description作为工具提示显示的最佳解决方案是什么吗?

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

推荐答案

有很多方法可以完成您想要的事情.对我来说最快的就是写html:

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>

上面使用了html5 title属性，这很高兴，您可以在大多数现代浏览器中获得没有任何JavaScript的工具提示.

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.

将"valueToReturn"，"toolTip"和"itemInListToShow"替换为"collectionOfSomething"中的值的适当ognl表达式

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

解决此问题的另一种方法是使用jQuery(任何JS库都可以使用)，并且会像这样.

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

1)在页面上放置带有工具提示的html列表，但使用CSS设置样式，以使其不可见.

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

2)使用jQuery(或JS首选项库)将鼠标悬停事件绑定到下拉列表中的每个项目，这将显示隐藏列表中相同索引的工具提示.

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.

这篇关于Struts2:如何在select标记中为每个下拉选项显示工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！