css only dynamic size tooltip - html

Question

I think I'm close but I am struggling to get a tooltip working exactly as I want. I have a dynamically built HTML table and I want to have tooltips for the contents of the TDs. It needs to be purely css (not based on javascript or events) for performance. I would like the tooltip to appear above and in the center of the TD upon hover and with an arrow underneath. I've got this to work but my problem is the content of the tooltip can sometimes be several lines which increases the tooltip height. When this happens the tooltip is still in the center of the TD but not above it anymore, it has moved down. How can I have a tooltip that will always be above the TD by the same amount regardless of the height. Please help.
html example td:
<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Text in the TD
</div>
</td>
my css:
.tooltip span
{
display: none;
color: #000;
text-decoration: none;
}
.tooltip:hover span
{
display: block;
position: absolute;
background-color: #292929;
margin: -2.8em -1em;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
white-space: pre-line;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
}
.tooltip:hover span::after
{
top: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid #292929;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-width: 10px;
margin-left: -40px;
}

Answer 1

for example
#keyframes pulse {
0% {
opacity: .5;
transform: translate(-50%, -100%) scale(.5);
}
50%{
opacity: 1;
transform: translate(-50%, -100%) scale(1.2);
}
100% {
transform: translate(-50%, -100%) scale(1);
}
}
.tooltip span
{
color: #000;
text-decoration: none;
transform: translate(-50%, -100%) scale(.5);
position: absolute;
background-color: #292929;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 1rem;
font-weight: 400;
text-align: center;
box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
width: max-content;
max-width: 200px;
top:0;
left:50%;
margin-top: -18px;
visibility: hidden;
opacity: 0;
}
.tooltip:hover{
position: relative;
}
.tooltip:hover span
{
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) scale(1);
animation: pulse 1s;
}
.tooltip:hover span::after
{
top: 100%;
left: 50%;
transform: translateX(-50%);
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid #292929;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-width: 10px;
}
<br>
<br>
<br>
<br>
<table border="1">
<tr>
<td>Hello</td>
<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Cool text
</div>
</td>
<td>
<div class="tooltip">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
Long text
</div>
</td>
</tr>
</table>