How to override property overflow:hidden for custom tooltip?

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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
}

<!-- language: lang-html -->

<div class="tooltip1">Link
  <span>CSS tooltip showing up when your mouse over the link</span>
</div>

<!-- end snippet -->

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.

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.td {
  width: 50px;
  overflow: hidden;
}

.td:has(.tooltip:hover) {
  overflow: visible;
}

<!-- language: lang-html -->

<div class="td">
  <div class="tooltip">
  sdfksdfksdfksdfksdfsdfksdfk
  </div>
</div>

<!-- end snippet -->