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

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -