How to override property overflow:hidden for custom tooltip? - html

Question

I am trying to override property overflow:hidden (parent td element)
for my tooltip which should be shown under my td element:
Code for tooltip:
.tooltip1 {
text-decoration: none;
overflow: visible !important;
}
.tooltip1:hover {
position: relative;
}
.tooltip1 span {
display: none;
}
.tooltip1:hover span {
border: #666 2px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: #e3e3e3;
left: 0px;
margin: 15px;
width: 150px;
position: absolute;
top: 15px;
text-decoration: none;
overflow: visible !important; //not working
}
<div class="tooltip1">Link
<span>CSS tooltip showing up when your mouse over the link</span>
</div>
Result:
But I need something like this(tooltip above all cells):
I need somehow disable or override the property of td overflow:hidden for [.tooltip1:hover span] (our tooltip), so I can't just change if for parent td element.

Answer 1

I'm guessing the tooltip is a child of the td. If so, you can override the overflow property by using has():
td:has(.tooltip1:hover) {
overflow: visible;
}
Here is an example:
.td {
width: 50px;
overflow: hidden;
}
.td:has(.tooltip:hover) {
overflow: visible;
}
<div class="td">
<div class="tooltip">
sdfksdfksdfksdfksdfsdfksdfk
</div>
</div>