jquery-ui - クリック後に入力にフォーカスがあるときにツールチップを閉じない

Question

入力にフォーカスがある場合にツールチップを閉じないようにするにはどうすればよいですか? タブでフォーカスを取得すると機能しますが、マウスを使用して入力にフォーカスすると、入力mouseoutにフォーカスがあってもツールチップが閉じられます。

できます

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

しかし、これにより、ホバー時にツールチップが無効になり、フォーカスがあるmouseoutときに無効にする必要inputがあります。

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

Answer 1

これらの他のすべてのリスナーを追加する代わりに、実際に調べて、最も効果的な方法は、ウィジェットを継承して追加のフラグを追加することであると判断しました

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 2

これを試して：

実施例

$("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()
オープン メソッド
クローズ イベント