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: enter image description here

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

have you tried putting the tooltipp init into a function and call it with setTimout() on('mouseover') ? — ggzone, Jan 30 '14 at 17:16
Might do the trick, but doesn't jQuery provide a proper method for that? — DominikAmon, Jan 30 '14 at 18:53
Now the link seems like you have got it right. Please share your answer if you already solved it. — Foreever, Feb 02 '14 at 18:20
@Foreever I did find a way to works, but I still see at as a workaround: http://fotos.amon.cc/Library/JavaScript/GalleryTooltip.js If there is no answer the next couple of days I will present my workaround, maybe someone has an idea to improve it. — DominikAmon, Feb 04 '14 at 12:16

score 0 · Accepted Answer · answered Mar 19 '14 at 08:21

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: enter image description here

jQuery UI Tooltip delayed loading

1 Answers1