jQuery UI Tooltip delayed loading

При наведении указателя мыши на ссылку, я хотел бы подождать как минимум секунду, прежде чем показывать всплывающую подсказку с динамически загруженной всплывающей подсказкой.jQuery UI Tooltip delayed loading

Что я создал это следовать 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/ (просто наведите курсор мыши на список галерей)

Но вначале я не понял, что загрузка текста предварительного просмотра происходит сразу же при наведении курсора на ссылку. Так что если вы быстро парят по всем ссылкам, вы настроите несколько запросов: enter image description here

С точки зрения пользователя (не зная, что запросы обжигают) это выглядит уже так, как я хочу, но как только начать загрузку предварительного просмотра, когда всплывающая подсказка фактически появляется?

Спасибо, Dominik

источник

2014-01-30 DominikAmon

вы пробовали положить tooltipp инициализации в функцию и вызвать ее с setTimout () при наведении курсора на') ? – ggzone

Можете сделать трюк, но не поддерживает ли JQuery надлежащий метод? – DominikAmon

Теперь ссылка кажется, что у вас все в порядке. Пожалуйста, поделитесь своим ответом, если вы уже решили его. – Foreever

То, что я сделал в конце концов должен был использовать 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/ и наведите курсор на одну из галереи ссылок слева для просмотра: enter image description here

источник

2014-03-19 08:21:40 DominikAmon

jQuery UI Tooltip delayed loading

ответ

Смежные вопросы