CODEWITHSUNDEEP
jqueryhovertooltip
sarah3585
sarah3585

Reputation: 637

Hover state remains until something else is hovered

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.

Upvotes: 0

Views: 2467

Answers (3)

Priyank Kapasi
Priyank Kapasi

Reputation: 1783

With the below solution, i hope your problem is solved..

<html>

  <head>

    <style type="text/css">

        .tooltip 
        {
            position:absolute;

            border:1px solid gray;
            border-radius: 3px;

            background-color:rgba(0,0,0,0.2);
            padding:5px;

            color:white;
            font-size: 12px;
        }

    </style>

   <script type="text/javascript" src="jquery.js"></script>

   <script type="text/javascript" >

       $(document).ready(function(){

            $(".cc-head").hover(function(){

                var tooltip_text = $(this).children().children().html(); //contains the data present inside 'span' element

                $('<p class="tooltip"></p>').html(tooltip_text).appendTo('body').fadeIn('slow'); //showing the tooltip

            }, function() { // remove the tooltip as soon as it goes outside the div

                $('.tooltip').remove();

            }).mousemove(function(e) {

                var x_pos = e.pageX + 15; //calculating the position of tooltip from x-axis, pageX gives the current position of mouse pointer from x-axis
                var y_pos = e.pageY + 10; //calculating the position of tooltip from y-axis, pageY gives the current position of mouse pointer from y-axis

                // assigning the css to .tooltip
                $('.tooltip').css('left',x_pos);
                $('.tooltip').css('top',y_pos); 

        });

       });

  </script>

 </head>

 <body>

   <div class="man">

         <div class="parts">

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

         </div>
   </div>

 </body>

</html>

Upvotes: 0

Priyank Kapasi
Priyank Kapasi

Reputation: 1783

After reffering the answer posted by 'psychotik', How can I display a tooltip message on hover using jQuery?

I think the below solution should suffice your needs. Hope it helps you.

Solution:

Jquery Script :

       $(document).ready(function(){

            $(".cc-head").hover(function(){
                $(this).attr('title',$(this).children().children().html());
            });

       });

html :

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

Upvotes: 0

Christoph
Christoph

Reputation: 51261

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');
    });

Upvotes: 1

Related Questions