on hover tooltip for more than one div using jquery

Advi
August 28, 2022
100 views
1 vote
2 Answers

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>

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 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 class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <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 class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <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 class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <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 class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <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>

$('.tooltip-img').mouseenter(function() {
    $(this).addClass('tooltip-img-img');
}).mouseleave(function() {
    $(this).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">
          <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 class="div-style">
      <div class="tooltip text" data-title="tooltip">
        <button class="tooltip-img">
          <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>

Please signup or login to give your own answer.

Click here to cancel reply.