Hover state remains until something else is hovered

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.

have you tried anything? or maybe searched SO before asking? http://stackoverflow.com/questions/1333546/how-can-i-display-a-tooltip-message-on-hover-using-jquery — red-X, Mar 15 '12 at 15:37
try to trigger your tooltip with .mouseover() and .mouseout() to remove/hide the tooltip http://api.jquery.com/mouseover/ — QQping, Mar 15 '12 at 15:37
I've got as far as adding a class on hover. My Jquery is very very basic and I dont understand how to adjust the code from other threads to work for me. $('.parts a span').mouseover(function() { $(this).addClass('selected'); $(this).removeClass('selected'); }); — sarah3585, Mar 15 '12 at 15:45

Christoph · Accepted Answer · 2012-03-15T16:54:22.760

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

edited Mar 15 '12 at 16:54

answered Mar 15 '12 at 16:30

Christoph

50,121
21
99
128

That's no problem, i edit my answer to give you some implementation hints. – Christoph Mar 15 '12 at 16:42
Many thanks for taking the time to write that but it's not removing the showinfo class of previous elements when it's added to another. – sarah3585 Mar 15 '12 at 16:53
It does, I just missed the `.` in the selector. You could have caught that :-p Note: copy&pasting doesn't improve programming skill. – Christoph Mar 15 '12 at 16:55
Many thanks, I am trying to learn JQuery but am a at a less than basic level atm. – sarah3585 Mar 15 '12 at 17:00
No problem. I didn't want to be offending, sry if this was the case. – Christoph Mar 15 '12 at 17:03

score 0 · Answer 2 · edited May 23 '17 at 11:33

0

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>

edited May 23 '17 at 11:33

Community

1
1

answered Mar 15 '12 at 16:34

Priyank Kapasi

1,773
2
18
27

Does this need a 'title' element to be used in the html? – sarah3585 Mar 15 '12 at 16:41
no. there is no need to add a title element in html. The .attr() adds the 'title' attribute to the div on which you hover. Did you try the above code? – Priyank Kapasi Mar 15 '12 at 18:35

score 0 · Answer 3 · answered Mar 15 '12 at 19:41

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>

Hover state remains until something else is hovered

3 Answers3