Question

Target: Object user will hover over to bring up secondary DOM
Tooltip: Fixed DOM object positioned about 10-15px below target

I have made a jquery “tooltip” plugin. This plugin allows users to hover over a DOM object, and will show the “tooltip”. I want users to be able to move their mouse from the target to the tooltip without it disappearing the second their mouse leaves the target.

I have tried this:

 var hoverTimeout;

                data.target.hover(function(){
                    $this.tooltip('show');
                }, function(){

                    hoverTimeout = setTimeout(function(){
                        $this.tooltip('hide');
                        console.log('hey');
                    }, 1000);

                });

                data.tooltip.hover(function(){
                    data.tooltip('show');
                    clearTimeout(hoverTimeout);
                }, function(){
                    data.tooltip('hide');
                });

However, this seems to stop the Tooltip from hiding. The reason I’d like to do this, is so forms can be used, text can be copied, etc., in the tooltip.

I’m hoping something like a setTimeout and clearTimeout will work as I don’t want to use hoverintent plugin.

Thank you so much in advance!

Answer 1

You should use the timer both ways:

var hoverTimeout;

data.target.hover(function()
{
    hoverTimeout && clearTimeout(hoverTimeout);
    $(this).tooltip('show');
},
function()
{
    var $this = $(this);
    hoverTimeout = setTimeout(function(){
        $this.tooltip('hide');
    }, 1000);

});

data.tooltip.hover(function()
{
    hoverTimeout && clearTimeout(hoverTimeout);
},
function()
{
    var $this = $(this);
    hoverTimeout = setTimeout(function(){
        $this.tooltip('hide');
    }, 1000);
});

---

You should probably combine the two, since you’re anyhow doing the exact same thing on both of them:

var hoverTimeout;

data.target.add( data.tooltip ).hover(function()
{
    hoverTimeout && clearTimeout(hoverTimeout);
    $(this).tooltip('show');
},
function()
{
    var $this = $(this);
    hoverTimeout = setTimeout(function(){
        $this.tooltip('hide');
    }, 1000);

});