skip to Main Content

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


  1. 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>
    Login or Signup to reply.
  2. $('.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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search