Hey there! I tried to create a visual representation of the issue I'm facing. If you want to take a look, just click on this link
This is how the code appears:
HTML:
<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a><br>
<a href="#">Hover This!<span class="tooltip">Hello, People!</span></a>
CSS:
a span {
display: none;
position: absolute;
color: #fff;
background: #000;
padding: 5px;
}
a {
position: relative;
}
a:hover span {
display:block;
text-align: center;
}
I also added some styling for the <a> tag, but I believe that's not where the issue lies.
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}
The problem I'm encountering is that when hovering over the first text, the popup box doesn't cover the second text. It always appears below the text instead of covering it.
Does anyone know how to solve this? It's crucial for my design. Thank you in advance!