当鼠标悬停在工具提示上时如何延迟工具提示

时间:2018-07-30 15:11:43

标签: jquery jquery-ui jquery-ui-tooltip

嗨,我正在使用jQuery ui工具提示。我在工具提示上显示图像,并在工具提示上显示内容。我的问题是,当鼠标悬停在工具提示上时,时间工具提示会隐藏。但是我想在鼠标悬停在该工具提示上时显示工具提示,并且当工具提示上的鼠标释放时隐藏工具提示

我的代码在 jsfiddle

      <a id="riverroad" href="#" title=""  >display</a>.

1 个答案:

答案 0 :(得分:0)

您可以尝试此解决方案

$( "#riverroad" ).tooltip({ 
        content: '<img src="https://kohler.scene7.com/is/image/PAWEB/Category_Template?$PDPcon$&$gradient_src=PAWEB%2Forganic-gradient&$shadow_src=PAWEB%2FBlank&$Badge1_src=PAWEB%2FBlank&$Badge4_src=PAWEB%2FBlank&$Badge3_src=PAWEB%2FBlank&$Badge2_src=PAWEB%2FBlank&$product_src=is{PAWEB%2Fzaa86577_rgb}" width="150" height="150"/><p><a href="http://www.google.com">content</a></p>', 

    show: { duration: 500,delay: 1000 } ,
    open: function(event, ui)
    {
        if (typeof(event.originalEvent) === 'undefined')
            return false;

        $('div.ui-tooltip').not('#' + $(ui.tooltip).attr('id')).remove();
    },
    close: function(event, ui)
    {
        ui.tooltip.hover(function()
        {
            $(this).stop(true).fadeTo(400, 1); 
        },
        function()
        {
            $(this).fadeOut('400', function() { $(this).remove(); });
        });
    }
});