HTML+CSS tooltip: Weird behavior in table with rowspan - html

Question

I have created a html table which contains tooltips for each cell. I don't understand at this point, why most of the tooltips are drawn above the table while some of the tooltips are covered by neighbouring cells? I just played around with the z-index, but could get it working properly.
Do you you have any ideas?
Since I am not allowed to post images, here is only a link:
Comparing image of working and non working tooltip
Please don't take the css stuff too serious, I am no web developer, I just wanted a quick html table solution.
So the example can be found right here:
https://jsfiddle.net/6foqnLkm/
The related tooltip css code (found on 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;
}

Answer 1

Remove "z-index : 2" in [data-tooltip] and add "z-index: 9" in [data-tooltip]:before
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before {
z-index:9;
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;
}

Answer 2

Try this
[data-tooltip]:before {z-index:9;}
Click here for Demo