Question

如何获取工具提示以禁用＆amp;在元素获得焦点时隐藏，在鼠标悬停时不再显示，直到模糊事件发生。

预期：工具提示延迟鼠标悬停。在我的jsFiddle中，鼠标悬停下拉列表，等待工具提示出现，点击下拉列表，工具提示将消失，你可以鼠标悬停其他元素，那些工具提示显示，假设左侧Dropbox仍然有焦点，鼠标重新结束，工具提示仍然没有显示。

未预期（要求解决）： 现在再次点击运行，在工具提示显示之前单击相同的下拉列表。保留鼠标悬停元素，工具提示出现 - 我不希望它在元素具有焦点时显示。

jsFiddle：http://jsfiddle.net/x1Lveooy/9/

$(document).on({
focus: function (e) {
    $('.ui-tooltip').hide()
    tempTitle = $(this).attr("data-title");
    $(this).attr("data-title", "");
    //intent, disable tooltip for this element only:
    //$(this).tooltip().tooltip('disable');
    //This would work if I wrap init in function & call again on blur, but not what I want:
    //$(document).tooltip().tooltip('disable');
},
blur: function (e) {
    $(this).attr("data-title", tempTitle);
}
}, '.element1, .element2, #box');

UPDATE 另一次尝试，在initTooltip（）期间使用“setTimeout”而不是“delay”（我读取延迟无法取消），收到错误： http://jsfiddle.net/x1Lveooy/12/

Answer 1

$（＆＃39; *＆＃39;）。tooltip（）而不是$（document）.tooltip（）
使用$（this）.tooltip（）。tooltip（＆＃39; close＆＃39;）;结合清除标题属性并在模糊时重置它

修正小提琴：http://jsfiddle.net/x1Lveooy/16/

$(document).ready(function () {
    //key point in fix: '*' instead of document
    initTooltip('*');
});
$(document).on({
    focus: function (e) {
        $('.ui-tooltip').hide();
        tempTitle = $(this).attr("data-title");
        $(this).attr("data-title", "");
        //key point in fix: close works even if tooltip isn't showing yet
        $(this).tooltip().tooltip('close');
    },
    blur: function (e) {
        $(this).attr("data-title", tempTitle);
    }
}, '.element1, .element2, #box');

function initTooltip(target) {
    $(target).tooltip({
        track: true,
        content: function () {
            return $(this).attr("data-title");
        },
        show: {
            delay: 1500
        },
        open: function (event, ui) {
            setTimeout(function () {
                $(ui.tooltip).fadeTo(1000, 0);
            }, 5000);
        }
    });
}

显示在下拉列表后面的jQuery工具提示

1 个答案: