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?
<!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');
console.log('test', tooltip.style.display);
btn.addEventListener('click', () => {
tooltip.style.display = 'block';
console.log('test', tooltip.style.display);
});
</script>
</body>
</html>