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

我有一个struts2选择标记，其中的选项是项目对象列表。 假设ItemJavaBean类具有以下3个属性：itemId、itemLabel、itemDescription

我的选择标记如下所示：

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

---

有谁知道每次用户悬停在某个选项上时，将描述显示为工具提示的最佳解决方案是什么吗？

我建议您也使用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属性用于工具提示对齐，非常奇怪，但它的工作方式是反向的。没什么大问题，如果你需要将它与北方对齐，就写南方。

有很多方法可以做你想做的事。对我来说，最快的方法就是编写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、工具提示和itemInListToShow，为collectionOfSomething中的值使用适当的ognl表达式

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

1使用工具提示将html列表放在页面上，但使用CSS样式，因此不可见

---

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

使用jQuery可以很容易地解决这个问题

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

函数addTitleAttributesvalue{

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

}

---

如果传递的值可以是选择按钮的id，我不确定您是否理解我的问题。我不需要下拉框“选择标记”的工具提示，但需要其中每个选项的工具提示。在您的示例中，我不知道如何让下拉菜单中的每个选项从item.description属性中获取工具提示？事后查看hoss的解决方案，如果您使用JS解决方案，我会修改2，让tipsy处理显示，因为它太酷了。虽然速度不够快，但我还是选择了一个简单的html解决方案。嘿，非常感谢四元数。我选择了第一个包含纯html和填充标题的实现。这太简单了，我喜欢它。我遇到了错误：-语法错误，无法识别的表达式：[object]选项这有什么解决方案吗？？

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