0

将鼠标悬停在链接上时，我想至少等待一秒钟，然后再显示带有动态加载的工具提示的工具提示。

我创建的是以下 jQuery 代码：

$(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");
}

这似乎工作得很好，你可以在这里看到它：http: //fotos.amon.cc/（只需将鼠标悬停在画廊列表上）

但我一开始并没有意识到，当鼠标悬停在链接上时，预览文本的加载会立即发生。因此，如果您快速将鼠标悬停在所有链接上，您将设置几个请求： 在此处输入图像描述

从用户的角度来看（不知道请求被触发），它看起来已经是我想要的方式，但是当工具提示实际出现时，如何只开始加载预览？

谢谢，多米尼克

4

1 回答 1

0

我最后做的是使用window.setTimeout和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");        
});    
}

至少按我想要的方式工作。

要查看它的实际效果，只需导航到http://fotos.amon.cc/并将鼠标悬停在左侧的一个画廊链接上进行预览： 在此处输入图像描述

于 2014-03-19T08:21:40.600 回答