How to create a custom tooltip on <tr> using HTML+CSS - html

Question

I have a custom table and what I would like to have is some text box appearing after you hover over its row. Some of the rows will be blurred, so I will add this in the example code as well. The issue that I'm facing is that I am clearly not good at CSS or HTML and I can't quite figure out how to adress the table row for that to work correctly and I have not found any solutions for that. I have successfully added the same tooltip to the column names, so you will se what I want to achieve in the example below:
<style>
* {
box-sizing: border-box;
}
.tooltip {
font-size: 15px;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
max-width: 60vw;
background-color: white;
border-style: solid;
border-color: #1a7bc9;
color: #000;
text-align: left;
border-radius: 6px;
padding: 15px 15px;
position: absolute;
z-index: 100;
bottom: 100%;
left: 50%;
margin-left: 0%;
/* I think this ↑ is supposed to help with it skewing to the right
but it does not... */
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.styled-table:hover .tooltiptext {
visibility: visible;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr:nth-of-type(even):hover,
.styled-table tr:hover {
background-color: #c7c7c7;
}
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
max-width: 57vw;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
position: relative;
margin-left: 15vw;
cursor: pointer;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr.active-row {
font-weight: bold;
}
</style>
<div class='tooltip'>&ltTooltip&gt
<span class="tooltiptext">this is just a minimal tooltip</span>
</div>
<table>
<thead>
<tr>
<th id="C1">Column_1
</th>
<th id="C2">
<div class="tooltip">Column_2
<span class="tooltiptext">This is my favourite column, it's so epic ngl</span>
</div></th>
<th id="C3" >
<div class="tooltip">Column_3
<span class="tooltiptext">This one is also good, but I like column 2 a little more</span>
</div>
</th>
<tr class="styled-table" style="text-color: #1a7bc9
filter: blur(4px) -o-filter:blur(4px)
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter: blur(4px);
"> <!-- For some reson blur ignores text-color -->
<span class="tooltiptext">This is not supposed to be visible</span>
<td>Wow, hidden</td>
<td>Shhhh</td>
<td>Epic</td>
</tr>
</table>
Here you can see that I have a table row of class styled-table and inside of it there is a class tooltiptext. I am trying to adress it using .styled-table:hover .tooltiptext, but nothing happens. Also, the tooltip appears to be skewed to the right and blur removes the text color, but this is not the main concern :)