Question

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

我的选择标记看起来像这样：

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

每当用户使用该选项时，我想在下拉菜单中显示每个选项的工具提示。填充该工具提示的文本存储在我的java bean类的<{1}}属性

中

我知道你可以为select标签提供一个tooptip，但这不是我需要的，因为每个选项/项目都有不同的描述。

目前我有自定义的javascript工具提示，如果可能的话我想使用此功能。如果项目将列在表格中，我将使用该函数：

itemDescription

有人知道每次用户将鼠标悬停在某个选项上时，将<td> <span class="tooltip" onmouseout="tooltip.hide();" onmouseover="tooltip.show('<s:property value="item.description" />');"> <s:property value="item.label" /> </span> </td>显示为工具提示的最佳解决方案是什么？

Answer 1

有很多方法可以做你想要的。对我来说最快的就是编写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的大多数现代浏览器中获得工具提示。

替换：“valueToReturn”，“toolTip”和“itemInListToShow”，并为“collectionOfSomething”中的值提供适当的ognl表达式

解决这个问题的另一种方法是使用jQuery（任何JS库都可以），并且可以这样做。

1）在页面上放置一个html列表，其中包含工具提示但使用CSS设置样式，因此不可见。

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

Answer 2

我建议你也使用tipsy，http://onehackoranother.com/projects/jquery/tipsy/是我找到的最佳解决方案，我也在使用它。

声明.js和.css文件的路径

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

最后一件事，将你的选择放在这个范围之间：

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

此跨度中的class属性用于工具提示对齐，非常奇怪，但它的工作方式是反向的。没有这么大的问题，如果你需要将它对齐到北方，只需向南写。

Answer 3

使用jQuery可以轻松解决

在onmouseoverbutton事件中调用ui中的以下函数

function addTitleAttributes（value）{

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

}

传递的值可以是选择按钮的id

Struts2：如何在select标签中显示每个下拉选项的工具提示？

3 个答案: