How can I apply a CSS Tooltip to a table entire row?

I'm trying to apply a CSS Tooltip to a table entire row not just to a cell but I can't figure out how.

Right now I'm only be able to apply a tooltip over a cell (as you can see on the snippet). Is it possible to apply a CSS Tooltip to a <tr> element? How?

This new gif shows exactly what I'm trying to achieve

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
    <style>
    
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: none;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    </style>
    
    <body>
    
    <div class="w3-container">
      <h2>Directory Test</h2>
    
      <table class="w3-table-all w3-hoverable">
        <thead>
          <tr class="w3-light-grey">
            <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>
    
        <tr>
          <td><div class="tooltip">Name #1<span class="tooltiptext"><img src="http://arsil.games/images/logo-02.png"></span></div></td>
          <td>Director #1</td>
          <td>152</td>
          <td>Email #1</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>

Thanks in advance

Solution

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
    <style>
    
    .tooltip {
    position: relative;
    /* display: inline-block; */
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: none;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
   
    .tooltip-relative {
    position: relative;
    }

    </style>
    
    <body>
    
    <div class="w3-container">
      <h2>Intranet People Directory</h2>
      <h6>(You can replace the test image for a photo)</h6>
      <table class="w3-table-all w3-hoverable">
        <thead>
          <tr class="w3-light-grey">
            <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>
    
        <tr class="tooltip">
          <td><div class="tooltip-relative">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Position #1</td>
          <td>151</td>
          <td>Email #1</td>
        </tr>
        <tr class="tooltip">
          <td><div class="tooltip-relative">Name #2<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Position #2</td>
          <td>152</td>
          <td>Email #2</td>
        </tr>
        </tr>
        <tr class="tooltip">
          <td><div class="tooltip-relative">Name #3<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
          <td>Position #3</td>
          <td>153</td>
          <td>Email #3</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>