Hover over tables

HTML

<html>
<body>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
                    <ul>
                      <li>List 1</li>
                      <li>List 2</li>
                    </ul>
                  </div>
                </div>
              </td>
              <td>Table Text</td>
              <td>Table Text</td>
            </tr>
          </tbody>
          </table>
          
          <div>
            <span>Content text</span>
          </div>
          
    </div>
    
    <div class="content">
        
          <table border>
          <tbody>
            <tr>
              <td>
                <span>Hover this:</span>
                <div class="hoverable">
                  <img src="https://img.icons8.com/flat_round/344/info.png">
                  <div class="tooltip">
                    <span>I am on TOP of the tables?</span>
      ...

CSS

.content {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 0;
}

table {
  position: relative;
  background: #ccc;
}

table td {
  white-space: nowrap;
}

table td span {
  position: relative;
  display: inline-block;
}

.hoverable {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hoverable img {
  display: inline-block;
  width: 15px;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 9999;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
}

.hoverable:hover .tooltip{
  display: block;
}