Having trouble getting a tooltip to work exactly as desired? I need to implement tooltips for the contents of dynamically built HTML tables. It must be done with CSS only, without relying on JavaScript or events for performance reasons. The challenge is having the tooltip always appear above and centered in the table data (TD) when hovered over, complete with an arrow below it. While I've managed to make this work, the issue arises when the tooltip content spans multiple lines, causing its height to increase and shift downwards from the center of the TD. How can I ensure that the tooltip remains consistently positioned above the TD by the same amount regardless of its height?
An example of the HTML used for the TD:
<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Text in the TD
</div>
</td>The CSS code being utilized:
.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;
}