Question

I am using this code for tooltips, a simple function I wrote to display title tags a little nicer on a webpage;

function tooltip(target_items, name){

 $(target_items).each(function(i){

$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

$(this).removeAttr("title").mouseover(function(){
        my_tooltip.css({display:"none"}).stop(true, true).slideDown(225);
}).mousemove(function(kmouse){
        my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
        my_tooltip.css({display:"none"});                 
});
 });

 }

I want it so that the whole thing will only trigger if the mouse is over it for a set amount of time, say 1000. If the mouse leaves the trigger area before that time I want it so the event never happens at all.

Answer 1

Probably you need to set timeout and clear it if 1 second not finished:

function tooltip(target_items, name) {

$(target_items).each(function (i) {

    $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "</p></div>");
    var my_tooltip = $("#" + name + i);
    var myTooltipTimer;
    var delay = 1000;

    $(this).removeAttr("title").mouseover(function () {
        myTooltipTimeout = window.setTimeout(function () {
            my_tooltip.css({ display: "none" }).stop(true, true).slideDown(225);
            myTooltipTimeout = null;
        }, delay);
    }).mousemove(function (kmouse) {
        my_tooltip.css({ left: kmouse.pageX + 15, top: kmouse.pageY + 15 });
    }).mouseout(function () {
        if (myTooltipTimer != null)
            window.clearTimeout(myTooltipTimer);
        else {
            my_tooltip.css({ display: "none" });
        }
    });
});

maybe using jQuery exists more clear solution