I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution:
a.tooltip span {
width: 250px;
border: #000 1px solid;
background: #F8F8F8;
display: none;
padding: 10px;
z-index: 1000000;
opacity: 0;
transition: 750ms all;
}
a.tooltip:hover span {
display: inline;
position: absolute;
top: 10px;
left: 25px;
outline: none;
text-decoration: none;
font-size: 70%;
color: #000;
opacity: 1;
}
However, this solution is not achieving the desired fade-in effect for the popup; it simply appears without any delay. Additionally, I am seeking for the popup to fade-out when the user moves the mouse cursor away.
If you have any suggestions or alternatives to improve this code, please let me know.
PS: This is how I have implemented the code:
<a href="#" class="tooltip">
<img src="questionmark.png" />
<span>Tooltip Text.</span>
</a>