ToolTip MouseEnter MouseLeave
by Benahmed Taoufiq
HTML
<div class="tooltip">
Index =2
</div>
<div class="text">
?
</div>
<div class="tooltip">
Index =4
</div>
<div class="text">
?
</div>
<div class="tooltip">
Index=6
</div>
<div class="text">
?
</div>
<div class="tooltip">
Index =8
</div>
<div class="text">
?
</div>
CSS
.text {
border:1px solid #000;
width: 15px;
height: 15px;
text-align: center;
border-radius:15px;
background-color: red;
position:relative;
left:43px;
top:5px;
color: #fff;
cursor: pointer;
}
.tooltip{
background-image: linear-gradient(greenyellow 0%,green 100%);
color: #FFF;
border-radius: 10px;
width: 60px;
height: 20px;
padding: 6px 10px;
text-align: center;
position: relative;
left:15px;
text-shadow:1px 1px 5px #000;
box-shadow:1px 0 10px #690000;
visibility: hidden;
}
.tooltip:after {
content:"\25B8";
color:green;
font-size: 19px;
width: 100%;
left:0;
text-align: center;
position: absolute;
top: 21px;
transform: rotate(90deg);
text-shadow: 1px 0 1px #000;
}
#toto{
background-image: linear-gradient(greenyellow 0%,green 100%);
color: #FFF;
border-radius: 10px;
width: 60px;
height: 20px;
padding: 6px 10px;
text-align: center;
position: relative;
left:15px;
text-shadow:1px 1px 5px #000;
box-shadow:1px 0 10px #690000;
visibility: hidden;
}
#toto:after {
content:"\25B8";
color:green;
font-size: 19px;
width: 100%;
left:0;
text-align: center;
position: absolute;
top: 21px;
transform: rotate(90deg);
text-shadow: 1px 0 1px #000;
}
JavaScript
$(function(){
$('.text').mouseenter(function () {
var Index=$(this).index();//alert(Index);
Index==1
? Index=0
:Index==3
? Index=1
:Index==5
? Index=2
:Index==7
? Index=3
:"";
$('.tooltip:eq('+(Index)+')').css("visibility","visible").fadeIn(300);
}).mouseleave(function(){
$('.tooltip').css("visibility","hidden");
});
});