I have a tooltip used for more than one div approximately 10 divs. Now when i mouseover on 1div , all the other divs background is highlighting. Please tell how can i achieve this. when i mouseover only one div should display tooltip & show the background color. I cannot write separate code for all the tooltips. Below is my code. Thanks in advance
$(document).ready(function() {
$(".tooltip").on('mouseover', function() {
$(".tooltip-img").addClass("tooltip-img-img")
});
$(".tooltip").on('mouseleave', function() {
$(".tooltip-img").removeClass("tooltip-img-img")
});
});
.tooltip-img {
float: right;
position: relative;
top: 83px;
left: 214px;
background: transparent;
border: none;
width: 25px;
height: 25px;
}
.tooltip-img-img {
width: 25px !important;
height: 25px !important;
border-radius: 15px;
background: #0f0 !important;
}
.tooltip {
position: relative;
}
.tooltip:hover .tooltiptext {
display: block;
}
.tooltip:before,
.tooltip:after {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
}
.tooltip:after {
height: 0;
top: 20px;
left: 100px;
width: 0;
}
.tooltip:before {
padding: 4px 8px;
width: 106px;
height: 22px;
background: red;
font-size: 14px;
color: #ffffff;
content: attr(data-title);
top: 75px;
white-space: nowrap;
left: 90px;
text-align: center;
}
.tooltip.text:after,
.tooltip.text:before {
transform: translate3d(0, -10px, 0);
transition: all 0.15s ease-in-out;
}
.tooltip.text:hover:after,
.tooltip.text:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.div-style {
border: 1px solid red;
width: 250px;
height: 120px;
display: flex;
float: left;
margin-left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-style">
<div class="tooltip text" data-title="tooltip">
<button class="tooltip-img">
<a href="">
<svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/>
</svg>
</a>
</button>
</div>
</div>
<div class="div-style">
<div class="tooltip text" data-title="tooltip">
<button class="tooltip-img">
<a href="">
<svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/>
</svg>
</a>
</button>
</div>
</div>
2
Answers
To do what you require, use the
this
keyword within the event handler to get a reference to the element which raised the event. From there you can usefind()
to target the specific child element you want to add the class to.Note that I removed the
a
element from your HTML as it’s not necessary, and is also invalid – you can’t nest clickable elements. In this case, thebutton
anda
.It’s also worth noting here that JS/jQuery isn’t necessary to do what you need. You can achieve it using plain CSS. This method would be preferred as it’s better supported and more performant: