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

问题描述

我有这个 struts2 选择标签，其中选项是 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 类的 itemDescription 属性中

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.

目前我有一个自定义的 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:如何在选择标签中显示每个下拉选项的工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！