If the structure remains the same, using overflow:hidden will not make the element visible.
To address this issue, one solution is to set a height/width on the td element to create space for the :after element.
table {
margin: 50px;
}
.tooltip {
position: relative;
}
td {
height: 80px;
overflow: hidden;
border:1px solid;
}
.tooltip:hover:after {
background: rgba(0, 0, 0, .8);
color: #fff;
top: -30px;
left: 10px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: absolute;
}
<table>
<tr>
<td>
<span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
</tr>
</table>
Another approach is to use fixed positioning BUT maintain the tooltip's relative position by adjusting with negative margins rather than changing top/left/right/bottom properties.
This method may not work if there is scrolling on the page as elements with position: fixed; remain in place relative to the viewport even when scrolled.
table {
margin: 50px;
}
.tooltip {
position: relative;
}
td {
overflow: hidden;
border:1px solid;
}
.tooltip:hover:after {
background: rgba(0, 0, 0, .8);
color: #fff;
margin-top:-30px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: fixed;
z-index:999;
}
<table>
<tr>
<td>
<span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
</tr>
</table>
A workaround for using fixed positioning on scrollable pages is to apply a transform without effect on a parent element:
body {
min-height:120vh;
}
table {
margin: 50px;
transform:translate(0,0);
}
.tooltip {
position: relative;
}
td {
overflow: hidden;
border:1px solid;
}
.tooltip:hover:after {
background: rgba(0, 0, 0, .8);
color: #fff;
margin-top:-30px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: fixed;
z-index:999;
}
<table>
<tr>
<td>
<span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
</tr>
</table>
Here are some useful links to understand the impact of transform on fixed positioning:
Why does `transform` break `position: fixed`?