on hover tooltip for more than one div using jquery-CodePudding

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 >
  <div  data-title="tooltip">
    <button >
      <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 >
  <div  data-title="tooltip">
    <button >
      <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>

CodePudding user response：

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 use find() 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, the button and a.

$(document).ready(function() {
  $(".tooltip").on('mouseover', function() {
    $(this).find(".tooltip-img").addClass("tooltip-img-img")
  });
  
  $(".tooltip").on('mouseleave', function() {
    $(this).find(".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 >
  <div  data-title="tooltip">
    <button >
      <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>
    </button>
  </div>
</div>
<div >
  <div  data-title="tooltip">
    <button >
      <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>
    </button>
  </div>
</div>

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:

.tooltip-img {
  float: right;
  position: relative;
  top: 83px;
  left: 214px;
  background: transparent;
  border: none;
  width: 25px;
  height: 25px;
}

/* change this selector */
.tooltip:hover .tooltip-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 >
  <div  data-title="tooltip">
    <button >
      <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>
    </button>
  </div>
</div>
<div >
  <div  data-title="tooltip">
    <button >
      <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>
    </button>
  </div>
</div>