Question

如果输入有焦点，如何才能关闭工具提示？它在使用制表符聚焦时有效，但如果我使用鼠标聚焦输入，即使输入具有焦点，工具提示也会在mouseout上关闭。

我能做到

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

但是这会在悬停时出现不可用的工具提示，我只需要在mouseout有焦点时放弃input。

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

Answer 1

试试这个：

Working Example

$("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
        }
    }
});

新方法和改进方法：

<强> Better Working Example

$("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()
open method
close event

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

单击后输入具有焦点时，请勿关闭工具提示

3 个答案: