jQuery 工具提示显示在下拉菜单后面

Question

如何让工具提示在元素获得焦点时禁用和隐藏，并且在鼠标悬停时不再显示，直到发生模糊事件。

预计: 鼠标悬停时工具提示有延迟。在我的jsFiddle中，鼠标悬停在左侧下拉菜单上，等待工具提示出现，单击下拉菜单，工具提示将消失，您可以将鼠标悬停在其他元素上，这些工具提示会显示，假设左侧下拉框仍然具有焦点，鼠标返回，工具提示仍然不显示。

不符合预期(需要解决): 现在再次点击运行，在工具提示显示之前单击相同的下拉菜单。保持鼠标悬停在元素上，会出现工具提示 - 我不希望它在元素具有焦点时显示。

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');

更新再次尝试，在 initTooltip() 期间使用“setTimeout”而不是“延迟”(我读到延迟无法取消)，出现错误: http://jsfiddle.net/x1Lveooy/12/

Answer 1

1. $('*').tooltip() 而不是 $(document).tooltip()
2. 使用 $(this).tooltip().tooltip('close');结合清除标题属性并在模糊时重置它

修复 fiddle :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);
        }
    });
}