javascript - Defining a tooltip for a <tr> tag in a table rather! Do not confuse this with the <td> tag -
i have been trying find example tooltip when hovering table row. hereby, mean whole table row rather table cells. there lots of answers table cells none of can applied table rows.
i have this:
<table> <tr> <td> item 1 <td> <td> item 2 <td> </tr> </table> what want this:
<table> <tr> <span class="tooltip"> tooltip text here </span> <td> item 1 <td> <td> item 2 <td> </tr> </table> css:
.tooltip { display: none; color: #000; text-decoration: none; padding: 3px; } .tooltip:hover { display: block; position: absolute; background-color: #fff; border: 1px solid #ccc; margin: 2px 10px; } how can add tooltip when hovering
this should work
.tooltip { display: none; color: #000; text-decoration: none; padding: 3px; } tr:hover .tooltip { display: block; position: absolute; background-color: #fff; border: 1px solid #ccc; margin: 2px 10px; } note: catch table row hover state , try set display block tooltip. hence on tr:hover situation tooltip visible. however, using span after table row not recommended approach.
Comments
Post a Comment