Question

I want to create a hover tooltip which displays what’s inside the span and stays until something another element is hovered over.

HTML

       <div class="man">
         <div class="parts">
           <div class="cc-head"><a href="#"><span>Text Head</span></a></div>
           <div class="cc-neck"><a href="#"><span>Text Neck</span></a></div>   
         </div>
       </div>

This is the Jquery I have so far,

$(document).ready(function() {
   $('.parts div a').mouseover(function() {
      $(this).addClass('showinfo');
   });
});

It’s set to display:none as default and when that class gets added it’s display:block. The part I need help on is having the class remain even on mouseout + until something else is mouseover-ed.

Many thanks, any help will be much appreciated.

Answer 1

On your mouseover select (if existing) element with showinfo-class and remove the class.

After that, apply showinfoto your hovered element. Should be no problem for you.

This way, the class will remain on that element until some other element gets hovered.

Implementation:

  $('.parts div a').mouseover(function() {
       // remove Class if there is an element with class already applied
       $('.showinfo').removeClass('showinfo');
       // Apply your class to this
       $(this).addClass('showinfo');
    });