I am facing an issue with the tooltips in my HTML table. Some of them are appearing above the table, while others are being covered by neighboring cells. I tried adjusting the z-index but couldn't resolve the problem. Do you have any suggestions on how to fix this?
Unfortunately, I can't post images here, so please refer to the following link to see a comparison:
View the image showing working and non-working tooltips
I'm not too proficient with CSS as I'm not a web developer; I just wanted a quick solution for my HTML table.
You can find the example right here: https://jsfiddle.net/6foqnLkm/
Here is the CSS code related to the tooltips (sourced from the web)
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
-moz-transition: ease 0.5s all;
-o-transition: ease 0.5s all;
-webkit-transition: ease 0.5s all;
transition: ease 0.5s all;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 110%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: black;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 110%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
bottom: 90%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
display: block;
white-space: pre-wrap;
}