jQuery UI Tooltip delayed loading

Question

When hovering over a link, I'd like to wait at least a second before showing a tooltip with dynamically loaded tooltip.

What I've created is the follow jQuery Code:

$(document).ready(function () {
  $("div#galleries ul li:not(.active) a").tooltip({
    items: "a",
    show: { delay: 1000 },
    content: 'Loading preview...',        
    open: function (event, ui) {
       previewGallery(event, ui, $(this)); 
    } 
  });
});

function previewGallery(event, ui, aLinkElement) {
    event.preventDefault();    
    ui.tooltip.load("http://www.someurl.com/Preview.aspx #preview");
}

Which seemed to work pretty fine, you can see it here: http://fotos.amon.cc/ (simply hover over the list of galleries)

But I didn't realize at the beginning, that the loading of preview text happens immediately when hovering over the link. So if you quickly hover over all the links, you'll set up several requests:

From the users point of view (without knowing that requests are fired) it looks already the way I want, but how to only start loading the preview, when tooltip is actually showing up?

Thanks, Dominik

Answer 1

What I did in the end was to use window.setTimeout and window.clearTimeout:

var galleryToolTipTimer = null;
var previewElement = null;

$(document).ready(function () {

$("div#photos div a img").tooltip();
$("div#galleries ul li:not(.active) a")
    .tooltip({ items: "a", content: 'Loading preview...', disabled: true, open: function (event, ui) { previewElement.appendTo(ui.tooltip.empty()); } })
    .mouseover(function (e) {
        if (galleryToolTipTimer != null) { window.clearTimeout(galleryToolTipTimer); }
        var aLinkObject = $(this);
        galleryToolTipTimer = window.setTimeout(function () { previewGallery(aLinkObject); }, 500);
    }).mouseleave(function (e) {
        window.clearTimeout(galleryToolTipTimer);
        $(this).tooltip("option", { disabled: true });
    });
});
function previewGallery(aLinkElement) {
previewElement = $("<div/>").load(aLinkElement.closest("div").data("galleryPreview") + "/" + aLinkElement.data("path") + " #preview", function () {
    aLinkElement.tooltip("open");        
});    
}

Works at least the way I want.

To see it in action, simply navigate to http://fotos.amon.cc/ and hover over one of the gallery links on the left for a preview: