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

所以我所做的是使用伪元素生成工具提示，工具提示的内容来自＆＃39; data-tip＆＃39;相应td元素的属性

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

在PrimeFaces中，可以将<p:tooltip />与属性globalSelector（在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" />

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

2 个答案: