Hide active div when mouser over on next or previous div

Question

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>

Answer 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>

Answer 2

您应该为每个 div 使用不同的 id/class 或尝试使用事件“onmouseleave”，当您的鼠标离开当前 div 时将触发该事件