Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers.
View the comparison between Firefox and Chrome
The left image shows Firefox's behavior, whereas the right side depicts Chrome's behavior. Preferably, I would like Chrome to display the extra information closer to the original span as seen in Firefox. Any suggestions on how to specifically address this issue for Chrome? Thank you in advance.
Pertinent code snippet:
.current-span {
position: relative;
}
.current-span:hover .extra-information {
visibility: visible;
}
.extra-information {
visibility: hidden;
width: max-content;
background-color: var(--color-fg);
color: var(--color-bg);
text-align: center;
border-radius: 5px;
padding: 3px;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
transform: translateX(-50%);
}<span class="current-span">
<span class="extra-information">rs1</span>
<span>Text</span>
<span>Text</span>
<span>Text</span>
<span>Text</span>
<span>Text</span>
<span>Text</span>
<br>
<span>Text</span>
<span>Text</span>
</span>