OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

There is this interesting problem around stacking context in CSS

  • Thread starter Thread starter Sanjay
  • Start date Start date
S

Sanjay

Guest
I have a table where the first column is sticky. When clicking a button within any row of the first column, a tooltip should open. However, the tooltip is partially hidden inside the adjacent sticky column in the next row.

I've prepared a complete code example to demonstrate the issue. You can run it in an online compiler to better understand the problem.

The problem occurs because the tooltip extends beyond its parent div and is obscured by the adjacent sticky column. How can I ensure the tooltip displays correctly without being hidden?


Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>

    <style>
      td:nth-child(1) {
        left: 0;
        position: sticky;
        z-index: 10;
        background: grey;
      }
    </style>
  </head>
  <body>
    <div style="width: 60%; overflow: auto">
      <table>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 1</th>
            <th>Header 1</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td style="height:100px">Column 1

              <button id='btn'>Click 1</button>
              <div id="tooltip" style="position: absolute;display: none; background: green; z-index: 1000; width: 100px;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              </div>
            </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
          </tr>

          <tr>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
          </tr>

          <tr>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
          </tr>

          <tr>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
            <td>Column </td>
          </tr>
        </tbody>

</table>
    </div>


    <script>
      const btn = document.getElementById('btn');
      const tooltip = document.getElementById('tooltip');
      btn.addEventListener('click', () => {
        tooltip.style.display = 'block';
      });
    </script>
  </body>
</html>

<p>I have a table where the first column is sticky. When clicking a button within any row of the first column, a tooltip should open. However, the tooltip is partially hidden inside the adjacent sticky column in the next row.</p>
<p>I've prepared a complete code example to demonstrate the issue. You can run it in an online compiler to better understand the problem.</p>
<p>The problem occurs because the tooltip extends beyond its parent div and is obscured by the adjacent sticky column. How can I ensure the tooltip displays correctly without being hidden?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>

<style>
td:nth-child(1) {
left: 0;
position: sticky;
z-index: 10;
background: grey;
}
</style>
</head>
<body>
<div style="width: 60%; overflow: auto">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
</tr>
</thead>

<tbody>
<tr>
<td style="height:100px">Column 1

<button id='btn'>Click 1</button>
<div id="tooltip" style="position: absolute;display: none; background: green; z-index: 1000; width: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
</tr>

<tr>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
</tr>

<tr>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
</tr>

<tr>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
<td>Column </td>
</tr>
</tbody>

</table>
</div>


<script>
const btn = document.getElementById('btn');
const tooltip = document.getElementById('tooltip');
btn.addEventListener('click', () => {
tooltip.style.display = 'block';
});
</script>
</body>
</html></code></pre>
</div>
</div>
</p>
 

Latest posts

Top