I am struggling to display a tooltip within a table field, on top of other fields and tables. The issue lies in the fact that the other tables and elements are housed within different DIVs that have set the CSS z-index property to 0.
Even if I assign a high value (e.g. 9999) to the tooltip's CSS z-index property, it still appears behind the other tables due to z-index stacking contexts.
I want to avoid modifying the z-index property of the other elements since I am inserting my elements into a third-party web page.
Furthermore, moving the tooltip to a higher level is not an option as I want it to be automatically removed when the element containing the tooltip is dynamically removed by the third party.
Is there a CSS solution to this conundrum?
You can experiment with the situation using this JSFiddle: https://jsfiddle.net/u6q8j4ck/
.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;
}<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>
<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>
</body>
</html>