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

Question

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

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

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

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

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

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>

这个 span 中的 class 属性是用于工具提示对齐的，很奇怪，但它的工作原理是相反的。没有这么大的问题，如果你需要把它对准北，就写南。

Answer 3

使用jQuery可以轻松解决

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

函数 addTitleAttributes(值){

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

}

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