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

Question

我想为表格中的每个单元格添加一个工具提示。表格包含 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>

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

Answer 2

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

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