Question

我的问题：

有没有办法可以将信息框添加到由表单创建的标签中：复选框 -Tag？将鼠标悬停在标签上时会出现（我知道html中的 title 属性就是这样）。

情景：

我有一个生成复选框的 div 。这些复选框的标签长于包含 div 的最大宽度。因为我不希望增加宽度，我想在显示名称时将鼠标悬停在标签上就足够了。但据我所知，复选框 -Tag不支持每个项目的标题标签（项目在运行时计算并传递给模型）。

看起来像这样：

<fieldset>
  <div id="selectedAccounts" style="overflow-y:scroll;overflow-x:hidden;" onchange="loadSthElse()">
    <form:checkboxes path="selectedAccounts" items="${accounts}" delimiter="</br>/>
  </div>
</fieldset>

作为项目，我传递Map<Integer,String>来填充值和标签。

Spring Documentation表示标准html属性title仍然可用。但我无法看到它是否或如何用于创建的每个项目，因为您似乎只定义了一个title。

我试过像

这样的东西

$("#selectedAccounts label").each(function(element) {
  element.attr('title', element.name)
}

但它也不起作用。

有没有办法让这项工作 - Javascript，Jquery - 或复选框 -Tag选择不当？

问候，乌韦

Answer 1

如果您不想使用title属性（¿为什么？），您可以在所需的任何隐藏对象中定义hover事件。它还为您的代码和HTML结构提供了更多的可读性。

<强> HTML

<form:input type="checkbox" value="CHECKBOX1" checked="checked">
<div>all the info you want to show when hovering your checkbox</div>

<强> CSS

input+div{display:none;}
input:hover+div{display:inline;}

Answer 2

我解决了这个问题。

生成复选框后，我只是使用dojo添加了一个标题。

<div id = "selectedCampaigns" onchange="loadAdSets()">
  <form:checkboxes path="selectedCampaigns"  multiple="true" items="${campaigns}" delimiter="<br/>"/>
  <script type="text/javascript">
    dojo.query("#selectedCampaigns label").forEach(function(element) {
      dojo.setAttr(element,"title",element.innerHTML);
    });
  </script>
</div>

将属性设置为innerHTML后，一切看起来都很好。

弹簧<form：checkboxes> with titles </form：checkboxes>

2 个答案: