I want an effect, when someone hovers over an element, he sees a tooltip for a few seconds after which the tooltip disappears, even when the mouse is still on the element. This is what I have:

<div data-sentence-tooltip="yes" data-tooltip-content: "some content"> some text </div>
$('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});

I tried the following two, based on other related SO questions:

setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);

and

jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};

$('[id^="tooltip"]').delay(2000, function(){
    $('[id^="tooltip"]').fadeOut('fast');
    }
);

But I think I know why none of these are working. Probably because .tooltip or id=tooltip* gets added to DOM on-the-fly.

Ref:

1. jQuery tooltip, hide after.. time
2. jquery tooltip set timeout

I want an effect, when someone hovers over an element, he sees a tooltip for a few seconds after which the tooltip disappears, even when the mouse is still on the element. This is what I have:

<div data-sentence-tooltip="yes" data-tooltip-content: "some content"> some text </div>
$('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});

I tried the following two, based on other related SO questions:

setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);

and

jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};

$('[id^="tooltip"]').delay(2000, function(){
    $('[id^="tooltip"]').fadeOut('fast');
    }
);

But I think I know why none of these are working. Probably because .tooltip or id=tooltip* gets added to DOM on-the-fly.

Ref:

1. jQuery tooltip, hide after.. time
2. jquery tooltip set timeout

• javascript
• jquery
• html
• css

• is your javascript/jquery code inside any listener or just as soon as the page runs, because if so you probably need to put your code inside .ready() function which looks like this $(document).ready(function(){//code goes here}); – Ali Elzoheiry Commented Dec 15, 2015 at 16:47
• i am using window.onload = initialize_function() where this code goes. – The Wanderer Commented Dec 15, 2015 at 16:58
• try using $(document).find('.tooltip').fadeOut(); – Ali Elzoheiry Commented Dec 15, 2015 at 17:00
• Doesn't work. And I think it is because there is no ".tooltip" in the document to find. ".tooltip" gets added to the document only after mouse hover. – The Wanderer Commented Dec 15, 2015 at 17:02

3 Answers 3

Taking cue from Zoheiry answer, this is what I finally did:

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
    setTimeout(function(){
    $('#enclosingParentDiv').find('.tooltip').fadeOut('fast');
  }, 1000);
}); 

Couple of points to note:

1. I applied the "mouseover" to each div, because the user is hovering the mouse on the content in the div
2. I search for .tooltip in the parent div because tooltip gets added as sibling.

Add a function like so

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
  // if the tooltip is a child of the element that is being hovered on
  // then write this.
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);

  // if the tooltip is a sibling of the element being hovered on
  // write this
  setTimeout(function(){
    $(this).parent().find('.tooltip').fadeOut();
  }, 2000);
});

This ensures that your code will only look for the .tooltip after you have hovered on the item which displays it.

I figured this out by looking at the element under inspect in chrome. Not sure if this is entirely foolproof and would work with other browsers

$('input').on('mouseover', function() {
    if(!$(this).is(":focus"))
        $("#" + $(this).attr("aria-describedby")).delay(800).fadeOut(800);
});

if clause is optional which makes this code effective only when focus is not on the textfield. otherwise the tooltip continue to display