jQuery tooltip showing behind dropdown

Question

How can I get tooltip to disable & hide when element gets focus and not show up again for mouseover until blur event takes place.

Expected: Tooltip has a delay on mouseover. In my jsFiddle, mouseover left dropdown, wait for tooltip to appear, click on dropdown, tooltip will disappear, you can mouseover other elements, those tooltips show, assuming left dropbox still has focus, mouse back over, tooltip still does not show.

Not Expected (Requirement to resolve): Now hit run again, click on same dropdown before tooltip shows. Keep mouseover element, tooltip appears - I don't want it to show while element has focus.

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 another try, using "setTimeout" instead of "delay" during initTooltip() (I read delay can't be cancelled), getting error: http://jsfiddle.net/x1Lveooy/12/

Answer 1

1. $('*').tooltip() instead of $(document).tooltip()
2. Use $(this).tooltip().tooltip('close'); in combination with clearing title attribute and resetting it on blur

Fixed 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);
        }
    });
}