テーブルにoverflowがあってもちゃんと表示されるツールチップ

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table Tooltip with Sidebar Example</title>
    <style>
      /* サイドナビのスタイル */
      .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1001;
        top: 0;
        left: 0;
        background-color: #333;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
      }

      .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #fff;
        display: block;
        transition: 0.3s;
      }

      .sidenav a:hover {
        color: #f1f1f1;
      }

      .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
      }

      #main {
        transition: margin-left 0.5s;
        padding: 16px;
      }

      /* テーブルとツールチップのスタイル */
      .wrap {
        overflow-x: auto;
        overflow-y: visible;
        height: 30px;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        padding: 10px;
        border: 1px solid black;
        position: relative;
      }

      .tooltip {
        display: none;
        position: absolute;
        background-color: #333;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        z-index: 1000;
        white-space: nowrap;
      }

      /* 吹き出しの三角マーク */
      .tooltip::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #333 transparent;
      }

      .tooltip-icon {
        cursor: pointer;
        color: blue;
        margin-left: 5px;
        position: relative;
      }
    </style>
  </head>
  <body>
    <!-- サイドナビ -->
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

    <!-- メインコンテンツ -->
    <div id="main">
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Open Sidebar</span>

      <div class="wrap">
        <table>
          <thead>
            <tr>
              <th>
                Header 1
                <span
                  class="tooltip-icon"
                  data-tooltip="This is the tooltip for header 1<br>With line break"
                  >?</span
                >
              </th>
              <th>
                Header 2
                <span
                  class="tooltip-icon"
                  data-tooltip="This is the tooltip for header 2<br>Another line break"
                  >?</span
                >
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Row 1, Col 1</td>
              <td>Row 1, Col 2</td>
            </tr>
            <tr>
              <td>Row 2, Col 1</td>
              <td>Row 2, Col 2</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 静的に配置されたツールチップ -->
      <div class="tooltip"></div>
    </div>

    <script>
      /* サイドナビを開く関数 */
      function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
      }

      /* サイドナビを閉じる関数 */
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
      }

      const tooltip = document.querySelector(".tooltip");
      let activeIcon = null; // 現在アクティブなアイコンを追跡する

      document.querySelectorAll(".tooltip-icon").forEach((icon) => {
        icon.addEventListener("click", function (event) {
          const tooltipHtml = this.getAttribute("data-tooltip");

          // 同じアイコンがクリックされた場合、ツールチップを閉じる
          if (activeIcon === this) {
            tooltip.style.display = "none";
            activeIcon = null;
            event.stopPropagation();
            return;
          }

          // ツールチップの内容をHTMLで更新
          tooltip.innerHTML = tooltipHtml;

          // アイコンの座標を取得
          const rect = this.getBoundingClientRect();

          // ツールチップの幅を一度表示させて取得
          tooltip.style.display = "block";
          const tooltipWidth = tooltip.offsetWidth;

          // アイコンの中心にツールチップの中心を合わせる
          const iconCenter = rect.left + rect.width / 2;
          const tooltipLeft = iconCenter - tooltipWidth / 2;

          // ツールチップをアイコンの下に表示する
          tooltip.style.left = `${tooltipLeft + window.scrollX}px`;
          tooltip.style.top = `${rect.bottom + window.scrollY + 10}px`;

          // アクティブなアイコンを更新
          activeIcon = this;

          // 他のツールチップが表示されたままにならないように設定
          event.stopPropagation();
        });
      });

      // ページをクリックするとツールチップを非表示にする
      document.addEventListener("click", function () {
        tooltip.style.display = "none";
        activeIcon = null; // クリックでリセット
      });

      // ツールチップ自身をクリックした場合、閉じる処理を防止
      tooltip.addEventListener("click", function (event) {
        event.stopPropagation();
      });
    </script>
  </body>
</html>



```