如何为多个元素添加一个工具提示？答案

【问题标题】：How to add one tooltip for multiple element?如何为多个元素添加一个工具提示？
【发布时间】：2017-02-04 13:52:49
【问题描述】：

我想为表格中的每个单元格添加一个工具提示。表包含 126 个单元格，我需要找到一种简单的方法来添加工具提示。然而，他们每个人都必须有自己的头衔。因此，工具提示必须既适用于每个元素又可自定义。有什么办法可以做到这一点，尤其是在 PrimeFaces 中。谢谢。

<tr>
    <td id="0-0" onclick="locationClick(this)" class="table_cell" > info1 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,0)}</span></td>
    <td id="0-1" onclick="locationClick(this)" class="table_cell" > info2 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,1)}</span></td>
    <td id="0-2" onclick="locationClick(this)" class="table_cell" > info3 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,2)}</span></td>
    <td id="0-3" onclick="locationClick(this)" class="table_cell" > info4 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,3)}</span></td>
    <td id="0-4" onclick="locationClick(this)" class="table_cell" > info5 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,4)}</span></td>
    <td id="0-5" onclick="locationClick(this)" class="table_cell" > info6 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,5)}</span></td>
    <td id="0-6" onclick="locationClick(this)" class="table_cell" > info7 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,6)}</span></td>
</tr>

【问题讨论】：

您是要从 DB 加载工具提示内容吗？还是从一组工具提示或其他任何内容中，请说出您要从哪里加载工具提示内容？
来自托管 bean
来自课程对象数组。简短的名称当然显示在表格中，工具提示应显示全名。
这个jsf有什么关系？
@Kukeltje 信息来自像这样的支持 bean #{preparedProgramBean.getSecondLineInfoOfLocation(0,0)}

标签： html css jsf tooltip

【解决方案1】：

所以我所做的是使用伪元素生成工具提示，工具提示的内容来自相应 td 元素的“数据提示”属性

td:hover:after {
  content: attr(data-tip);
  display: block;
  position: absolute;
  background-color: #333;
  color: white;
  padding: 7px 10px;
  border-radius: 2px;
}

td:after {
  display: none;
}

td {
  position: relative;
  cursor: pointer;
}

  <table>
<tr>
    <td id="0-0" onclick="locationClick(this)" class="table_cell" data-tip="one1"  > info1 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,0)}</span></td>
    <td id="0-1" onclick="locationClick(this)" class="table_cell" data-tip="one2"> info2 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,1)}</span></td>
    <td id="0-2" onclick="locationClick(this)" class="table_cell" data-tip="one3"> info3 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,2)}</span></td>
    <td id="0-3" onclick="locationClick(this)" class="table_cell" data-tip="one4"> info4 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,3)}</span></td>
    <td id="0-4" onclick="locationClick(this)" class="table_cell" data-tip="one5"> info5 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,4)}</span></td>
    <td id="0-5" onclick="locationClick(this)" class="table_cell" data-tip="one6"> info6 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,5)}</span></td>
    <td id="0-6" onclick="locationClick(this)" class="table_cell" data-tip="one7"> info7 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,6)}</span></td>
</tr>
  </table>

【讨论】：

有没有办法为所有单元格使用一个工具提示？ Primefaces 有一个解决方案，但它并没有完全解决我的问题
应用于 tr 标签，我的意思是在 tr 标签上拥有 data-tip 属性
Primefaces 为工具提示使用了这样一个额外的元素 primefaces.org/showcase/ui/overlay/tooltip/tooltipOptions.xhtml
我可以在一个工具提示中使用元素的 id 来识别它们吗？
可能是，但如何？

【解决方案2】：

在 PrimeFaces 中，您可以使用带有属性 globalSelector 的 <p:tooltip />（PF 4.0 中的 added）。对于选择器，我建议在您想要提供工具提示的所有元素上放置一个标记 CSS 类。

<p:tooltip globalSelector=".special-tooltip" />

<p:inputText styleClass="special-tooltip" title="Input 1" />
<p:inputText styleClass="special-tooltip" title="Input 2" />

【讨论】：