Nicht in der Nähe tooltip, wenn der Eingabe-Fokus hat, nachdem Sie auf

Wie kann ich machen tooltip nicht geschlossen werden, wenn der input den Fokus hat? Es funktioniert, wenn es den Fokus erhält mit dem tab, aber wenn ich mit der Maus den Fokus auf input -, tooltip geschlossen mouseout auch wenn input-Fokus hat.

Kann ich tun

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

Aber das wird dissable tooltip schweben und ich muss nur dissable mouseout wenn input Fokus hat.

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

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

  • Also du willst das der tooltip angezeigt werden (und bleiben erschien), wenn der Eingabe-Fokus hat? Was ist, wenn Sie den Mauszeiger über die input-und es muss auch nicht konzentrieren? Möchten Sie den standard-tooltip? Oder möchten Sie, dass der tooltip nur angezeigt, wenn das element den Fokus hat?
  • schweben sollte funktionieren, aber hoverout sollte nicht in der Nähe tooltip angezeigt, wenn das element den Fokus hat.
InformationsquelleAutor Qiao | 2013-08-28
  1. 4

    Versuchen Sie dies:

    Beispiel

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

    Neue und Verbesserte Methode:

    Bessere Arbeits-Beispiel

    $("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-Dokumentation:

    :focus

    event.preventDefault()

    .focusout()

    open-Methode

    close-Ereignis

    • Es funktioniert, aber es blinkt (schnell schließen und öffnen), wenn die Maus hover. Ich werde dies verwenden, wenn es keine andere Möglichkeit gibt.
    • siehe update
    • Die ui.tooltip.preventDefault(); Linie anscheinend nur funktionieren, weil es einen Fehler verursacht, was wiederum verhindert, dass der tooltip geschlossen wird-offensichtlich ist das nicht erwünscht. Die einzige einfache Möglichkeit, die ich gefunden habe, die das gleiche erreichen ist e.stopImmediatePropagation(); an seinem Platz.
    InformationsquelleAutor apaul
  2. 4

    Anstatt all diese anderen Zuhörer, ich sah in der tatsächlichen und beschlossen, der effektivste Weg ist, Erben Sie das widget und fügen Sie eine zusätzliche Flagge

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

    Hier ist eine demo
    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
});

    Im Vergleich zu der anderen Lösung, das nicht von uns verlangen, mehr zu tun arbeiten mit dem extra-offene Ausschreibungen (die eigentlich mehrere Aufrufe innerhalb es). Wir einfach verhindern, dass das tooltip schließen, wenn wir den Fokus auf das element, auf Wunsch original-Beitrag.

    InformationsquelleAutor jltwoo
  3. 0

    Das einzige, was Sie tun müssen, um zu beheben, die ui-Fehler wird nur übergeben Sie es als parameter pro Dokumentation.

    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');
    }
});
    InformationsquelleAutor Andrew
Schreibe einen Kommentar