I recently attempted to create a script that would fade in a tooltip when hovering over a link or image. Everything was working fine except for the fact that only one tooltip would appear at a time. In other words, I wanted to hover over an image and have a tooltip display directly above it without any other tooltips on the page being visible. I understand why this is happening (all tooltips have the same class, so hovering over any image fades them all in), but I'm unsure how to fix it. I hope I've explained my issue clearly and would greatly appreciate any help. (Please forgive me if my English isn't perfect, it's not my native language)
Here is the code snippet:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>You can view the code in action on jsfiddle.net: https://jsfiddle.net/3y8pcv69/