<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover {background-color: coral;} </style> </head> <body> <h2>Hoverable Table</h2> <p>Move the mouse over the table rows to see the effect.</p> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> </table> </body> </html>Quiero agregar un mensaje emergente cuando mi cursor se mueva sobre mi fila. Soy incapaz de lograr mi objetivo. Las diferentes filas generarán diferentes mensajes emergentes. Soy nuevo con CSS, por lo que no pude resolverlo por mí mismo.
¿Algo así?
table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover { background-color: coral; } tr .tooltip { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: relative; z-index: 1; } tr:hover .tooltip { visibility: visible; } <h2>Hoverable Table</h2> <p>Move the mouse over the table rows to see the effect.</p> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> <td class="tooltip">row2</span> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> <td class="tooltip">row2</span> </tr> </table>Consulte la información sobre herramientas de CSS en W3Schools