Hide active div on next element mouse over

Question

I want to hide the tooltips div which I will show on the div click so once mouse over on next div the previous div tooltips hide. But its hiding when mouse leave on the next div area.

https://codepen.io/codepat007/pen/BazYXKo

My Code

 $(".tooltipsShow").click(function() { $(".tooltips").show(); }); $(".tooltipsShow").hover(function() { $(this).nextAll().eq(0).find(".tooltipsText").parent(".tooltips").hide(); });

 .tooltips { display: none; padding: 10px; position:absolute; top: 10%; left: 30%; background: green; color:#fff; }

 <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></div>

Answer 1

Then just hide the tooltip div on hover

$(".tooltipsShow").hover(function() {
   console.log('hover');
  $(".tooltips").hide();
});