1

I have dynamic tooltips. On each div click, it should show different tooltips. I want to hide the tooltips when I mouse over on next div. I want to have a scroll bar in the tooltips so when move right to div then tooltips should not be hide because need to scroll down the data of tooltips.

$(".tooltipsShow").click(function() {
  $(".tooltips").show();
});


$(".tooltipsShow").hover(function() {
 $(".tooltipsText").parent(".tooltips").hide();
});
.tooltips {
  display: none;
  padding: 10px;
  position:absolute; 
  top: 10%;
  left: 13%;
  background: green;
  color:#fff;
  height: 130px;
  overflow:scroll;
}

.tooltipsShow {
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltipsShow">
  <p>Some text 1</p>
</div>
<div class="tooltipsShow">
  <p>Some text 2</p>
</div>
<div class="tooltipsShow">
  <p>Some text 3</p>
</div>
<div class="tooltipsShow">
  <p>Some text 4</p>
</div>

<div class="tooltips"><p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
</div>
FSDford
  • 448
  • 5
  • 10
Vishal
  • 235
  • 1
  • 15

2 Answers2

1

The simplest solution to this in my opinion is making sure that the tooltip remains visible when that div is hovered over. That can be done by adding the following lines of code:

    $(".tooltips").hover(function() {
     $(".tooltips").show();
    });

The code:

$(".tooltipsShow").click(function() {
  $(".tooltips").show();
});


$(".tooltipsShow").hover(function() {
 $(".tooltipsText").parent(".tooltips").hide();
});

$(".tooltips").hover(function() {
 $(".tooltips").show();
});
.tooltips {
  display: none;
  padding: 10px;
  position:absolute; 
  top: 10%;
  left: 13%;
  background: green;
  color:#fff;
  height: 130px;
  overflow:scroll;
}

.tooltipsShow {
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltipsShow">
  <p>Some text 1</p>
</div>
<div class="tooltipsShow">
  <p>Some text 2</p>
</div>
<div class="tooltipsShow">
  <p>Some text 3</p>
</div>
<div class="tooltipsShow">
  <p>Some text 4</p>
</div>

<div class="tooltips"><p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
</div>
Parama Kar
  • 462
  • 3
  • 8
0

You should either use a different id/class for each div or try using to event "onmouseleave", which will be triggered when your mouse be leaving the current div

Ran Marciano
  • 1,431
  • 5
  • 13
  • 30