My tooltip creation works when hovering over an icon, but there's a slight issue - it doesn't always follow the cursor and can get stuck at times.
To see a demo of this in action, click here: fiddle
Here's the code I'm using:
HTML
<a href="#" class="tooltip"><img src="http://i.imgur.com/JkhlPKF.png"><span>Equipment</span></a>
<a href="#" class="tooltip"><img src="http://i.imgur.com/lgHQamk.png"><span>Maps</span></a>
CSS
.tooltip {
text-decoration:none;
color: black;
position: relative;
}
.tooltip:hover {
text-decoration: none;
cursor: default;
}
.tooltip span {
display: none;
}
.tooltip:hover span {
display: block;
position: absolute;
width: 80px;
z-index: 100;
background: #FFFFCC;
text-align: center;
border: 1px solid black;
text-decoration: none;
}
If CSS can't handle fixing the cursor issue, would simple JavaScript (without jQuery) be a viable solution?
Appreciate any guidance on this matter. Thank you.