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>