I'm having an issue with a tooltip on my website. Despite adding the necessary CSS positions, the tooltip does not display correctly.
The problem arises when the tooltips from the icons on the left don't show up properly on top of the content to the right.
The code snippet that seems to be causing the problem is as follows;
a.icon {
position: relative;
text-decoration: none;
}
a.icon .tooltip {
-webkit-transition: opacity 0.5s ease 0.2s, left 0.5s ease 0.2s;
-moz-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
-o-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
opacity: 0;
font-size: 11px;
color: #FFFFFF;
background:url('../images/tooltip.png') no-repeat bottom center;
position:absolute;
height: 40px;
line-height: 50px;
left: 100px;
text-align:center;
padding-left:10px;
width: 110px;
display: block;
top: 24px;
z-index: 1000;
}
a.icon:hover .tooltip {
opacity: 1.0;
top:24px;
}
And here is the HTML structure without lorem ipsum text;
<div id="icons">
<a href="info page" class="icon" id="info"><span class="tooltip">About Me</span></a>
<a href="portfolio page" class="icon" id="portfolio"><span class="tooltip">Portfolio</span></a>
<a href="mailto:" class="icon" id="email"><span class="tooltip">Mail</span></a>
<a href="?userinfo" class="icon" id="skype"><span class="tooltip">Skype</span></a>
<a href="" class="icon" id="twitter"><span class="tooltip">Twitter</span></a><!-- Holds the icons for the site -->
</div>
<div id="content">
raesent at quam velit,
</div>
Although there are span classes associated with tooltips, they cannot be added as code within this text box.
In conclusion, the tooltip functionality is not displaying as intended. You can view an example live on [website link].
Apologies if the code appears disorganized; I am new to web development and still in the process of setting up my portfolio.
Thank you for your help.