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

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 元素的“data-tip”属性

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>