Search code examples
javascriptjqueryhtmlif-statementtooltip

Jquery if else statment for tooltip


I have a tooltip that appears when you mouseover a link. I want the tooltip to stay if you hover over it (because there are links and such in it), or disappear if you mouse away from the link. I tried a couple things, but haven't figured it out. This is my first time building anything serious with jQuery.

The stuff below is what is in the .hover() 'handlerOut' event.

if($(this.a).mouseout())
{
    if ($('.tip_container').hover()) {
        $('.tip_container').css('display', 'block');
        $('.tip_container').mouseleave(function() {
        $('.tip_container').remove(0);
    });
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
    {
        $('.tip_container').remove(0);
    }
}
>>"this.a" refers to the link<<

With this and the other things I've tried the tooltip doesn't disappear unless you mouse over the off of it. I also tried

else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {

Is it possible to have multiple conditions?

The main idea of the code is that if you mouse off of the link "this.a" the tooltip will be removed by:

$('.tip_container').remove(0);

but if you mouse over the tooltip it will not be removed until you mouse off of the tooltip.


Solution

  • After a good nights rest and ignoring it for a while I figured out a solution. This is what I put in the hover handlerOut event.

     var timer;
    
     timer = setTimeout(function() {
               $('.tip_container').remove();
           }, 500);                     
               $( '.tip_container' ).hover(
           function() {
               clearTimeout(timer);
               $('.tip_container').css('display', 'block');
           }, function() {
               $('.tip_container').remove();
           }
        );
    

    On the hover out of the link it will wait before executing the remove and if the mouse hovers over the tooltip it will clear the timer and set the tooltip to block to keep it displayed then on that hover out of the tooltip it will be removed.