jquery-ui - 单击后输入具有焦点时不要关闭工具提示

Question

如果输入有焦点，如何使工具提示不关闭？mouseout当它通过选项卡获得焦点时它可以工作，但是如果我使用鼠标专注于输入，即使输入有焦点，工具提示也会关闭。

我可以

$('input').tooltip().off("mouseover mouseout");

但这会在悬停时禁用工具提示，我只需要在有焦点mouseout时禁用。input

http://jsfiddle.net/3dX6d/2/
http://jsfiddle.net/3dX6d/3/

Answer 1

尝试这个：

工作示例

$("input").tooltip({
    close: function (event, ui) { //when the tooltip is supposed to close 
        if ($('input').is(':focus')) { // check to see if input is focused 
            $('input').tooltip('open'); // if so stay open
        }
    }
});

新的和改进的方法：

更好的工作示例

$("input").tooltip({
    hide: {
        effect: 'explode'// added for visibility
    } 
}).mouseleave(function () { // on mouse leave
    if ($('input').is(':focus')) { // if input is focused 
        ui.tooltip.preventDefault(); //prevent the tooltip's default behavior
        $('input').tooltip('open'); // leave the tooltip open
    }
}).focusout(function () { // on focus out 
    $('input').tooltip('close'); // close the tooltip
});

API 文档：
:focus
event.preventDefault()
.focusout()
打开方法
关闭事件

Answer 2

我没有添加所有这些其他侦听器，而是查看了实际情况并决定最有效的方法是继承小部件并添加一个额外的标志

http://code.jquery.com/ui/1.10.3/jquery-ui.js

这是一个演示 http://jsfiddle.net/3dX6d/7/

(function ($) {
    $.widget("custom.tooltipX", $.ui.tooltip, {
        options: {
            focusPreventClose: false
        },

        close: function (event, target, content) {
            if (this.options.focusPreventClose && $(this.element).is(":focus")) {
                // Don't call the parent's close() call but therefore have to add event on focus out
                this._on({ focusout:this.close });
            } else {
                this._superApply(arguments);
            }
        }
    });
}(jQuery));

$('input').tooltipX({
    focusPreventClose: true
});

与其他解决方案相比，这不需要我们对额外的打开调用做更多的工作（实际上在其中进行了其他几个调用）。当我们按照原始帖子的要求将焦点放在元素上时，我们只是阻止工具提示关闭。

Answer 3

要修复 ui 错误，您唯一需要做的就是将其作为每个文档的参数传入。

http://api.jqueryui.com/tooltip/#event-close

$(document).tooltip({ selector: "[title]" }).mouseleave(function(event, ui) {
    if ($('input').is(':focus')) {
        ui.tooltip.preventDefault();
        $('input').tooltip('open');
    }
});