Wie füge ich einen Tooltip für mehrere Elemente hinzu?

Question

Ich möchte eine Tooltip für jede Zelle in einer Tabelle hinzufügen. Die Tabelle enthält 126 Zellen und ich muss einen kurzen Weg finden, Tooltip hinzuzufügen. Jedoch muss jeder von ihnen seinen eigenen Titel haben. Daher muss Tooltip sowohl für jedes Element als auch anpassbar sein. Gibt es einen Weg dies zu tun, besonders in PrimeFaces? Danke.

<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

so, was ich getan haben, erzeugt Tooltip Pseudo-Element und den Inhalt der Tooltip verwendet, ist von 'Daten-Spitze' Attribut von entsprechenden td Element

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>