jQuery toggleClass example

Toggle class name on click in jQuery

by Ben Clayton

HTML

<h1>Scroller</h1>

<div class="scroller">
  <div class="caseitem">
    <span class="findcases_tooltip">Hello1</span>

    <span class="findcases_tooltiptext">On 2020-10-21 10:50, Britvic Consumer Care Consumer Carwwrote:&gt; Thanks for contacting Britvic.&gt;&gt; [#201020-000001]&gt;&gt; bjklbvjklbjk&gt;&gt; 2020 Britvic heres another email
    </span>
  </div>

  <div class="caseitem">
    <span class="findcases_tooltip">Hello1</span>

    <span class="findcases_tooltiptext">On 2020-10-21 10:50, Britvic Consumer Care Consumer Carwwrote:&gt; Thanks for contacting Britvic.&gt;&gt; [#201020-000001]&gt;&gt; bjklbvjklbjk&gt;&gt; 2020 Britvic heres another email
    </span>
  </div>
  <div class="caseitem">
    <span class="findcases_tooltip">Hello1</span>

    <span class="findcases_tooltiptext">On 2020-10-21 10:50, Britvic Consumer Care Consumer Carwwrote:&gt; Thanks for contacting Britvic.&gt;&gt; [#201020-000001]&gt;&gt; bjklbvjklbjk&gt;&gt; 2020 Britvic heres another email
    </span>
  </div>
  <div class="caseitem">
    <span class="findcases_tooltip">Hello1</span>

    <span class="findcases_tooltiptext">On 2020-10-21 10:50, Britvic Consumer Care Consumer Carwwrote:&gt; Thanks for contacting Britvic.&gt;&gt; [#201020-000001]&gt;&gt; bjklbvjklbjk&gt;&gt; 2020 Britvic heres another email
    </span>
  </div>
  <div class="caseitem">
    <span class="findcases_tooltip">Hello1</span>

    <span class="findcases_tooltiptext">On 2020-10-21 10:50, Britvic Consumer Care Consumer Carwwrote:&gt; Thanks for contacting Britvic.&gt;&gt; [#201020-000001]&gt;&gt; bjklbvjklbjk&gt;&gt; 2020 Britvic heres another email
    </span>
  </div>
  <div class="caseitem">
    <span class="findcases_tooltip">Hello1</span>

    <span class="findcases_tooltiptext">On 2020-10-21 10:50, Britvic Consumer Care Consumer Carwwrote:&gt; Thanks for contacting Britvic.&gt;&gt; [#201020-000001]&gt;&gt; bjklbvjklbjk&gt;&gt; 2020 Britvic heres another email
    </span>
  </div>
  <div...

CSS

.scroller {
  
  
  border: 1px solid red;
  height: 200px;
  overflow: auto;
  
}

.findcases_tooltiptext {
  display: none;
  position: absolute;
  background-color: black;
  color:white;
  width: 20%;
  padding: 20px;
  border-radius: 5px;
}

.findcases_tooltip {
  margin-left:50%;  
}

JavaScript

$(document).ready(function() {

  $(document).on('mouseover', ".findcases_tooltip", function() {
    var $tooltip = $(this).next(".findcases_tooltiptext");
    var $hoveritem = $(this);
    $tooltip.show();
    $tooltip.css("top", $hoveritem.position().top + "px");
    $tooltip.css("left", ($hoveritem.position().left - $tooltip.width()) + "px");
  });

  $(document).on('mouseout', ".findcases_tooltip", function() {
    var $tooltip = $(this).next(".findcases_tooltiptext");
    $tooltip.hide();
  });

});