Как добавить одну подсказку для нескольких элементов?

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>