Aktivieren Sie angular-ui Tooltip für benutzerdefinierte Ereignisse

Question

Ich versuche, easy-Tooltip-Funktionalität zu verwenden, um meinen Benutzer anzuzeigen, dass ein bestimmtes Feld ungültig ist, aber es scheint, dass der Tooltipp nur auf einige vordefinierte Trigger angezeigt werden kann. Gibt es eine Möglichkeit, den Tooltip mit Ausnahme dieser Trigger auszulösen?

Zum Beispiel:

<input 
    type="text" 
    tooltip="Invalid name!" 
    tooltip-position="right" 
    tooltip-trigger="myForm.username.$invalid"> 

Answer 1

Hier ist ein Trick.

Twitter Bootstrap tooltips (auf die Angular-UI angewiesen ist) kann das Triggerereignis mit einem zusätzlichen Attribut wie in angeben. Dies gibt Ihnen eine Möglichkeit, den Auslöser programmatisch ändern (mit kantigem):

<input 
    ng-model="user.username" 
    name="username" 
    tooltip="Some text" 
    tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 
/> 

Also, wenn username $ ungültig ist, die tooltip-trigger Ausdruck 'mouseenter' auswertet und Tooltip wird sich zeigen. Andernfalls wird der Trigger auf 'never' ausgewertet, wodurch der Tooltip nicht ausgelöst wird.

EDIT:

@cotten (in den Kommentaren) erwähnt ein Szenario, in dem Tooltip stecken bleibt und wird nicht verschwinden, auch wenn das Modell gültig ist. Dies passiert, wenn die Maus während der Texteingabe über dem Eingabefeld bleibt (und das Modell wird gültig). Sobald die Modellvalidierung als wahr ausgewertet wird, wird tooltip-trigger auf "nie" wechseln.

UI Bootstrap verwendet eine so genannte triggerMap, um zu ermitteln, auf welchen Mausereignissen die QuickInfo ein-/ausgeblendet wird.

// Default hide triggers for each show trigger 
var triggerMap = { 
    'mouseenter': 'mouseleave', 
    'click': 'click', 
    'focus': 'blur' 
}; 

Wie Sie sehen können, diese Karte weiß nichts über die „nie“ Ereignis, es ist also nicht in der Lage zu bestimmen, wann der Tooltip zu schließen. Um das Trickspiel gut zu sehen, müssen wir diese Map nur mit unserem eigenen Event-Paar aktualisieren und UI Bootstrap wird dann wissen, welches Ereignis beim Schließen des Tooltips zu beobachten ist, wenn tooltip-trigger auf "nie" eingestellt ist.

app.config(['$tooltipProvider', function($tooltipProvider){ 
    $tooltipProvider.setTriggers({ 
    'mouseenter': 'mouseleave', 
    'click': 'click', 
    'focus': 'blur', 
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave 
    }); 
}]); 

PLUNKER

_{Hinweis: $ Tooltip-Anbieter von dem "ui.bootstrap.tooltip" Modul ausgesetzt ist und es erlaubt uns, unsere Tooltips in App-Konfiguration global konfigurieren.}

Answer 2

habe ich versucht, etwas anderes

tooltip="{{(myForm.input1id.$invalid) ? 'You have an error with this field' : ''}}" 

Auf diese Weise nur meine Tooltip wurde, etwas geschrieben, wenn die Eingabe ungültig ist und wenn es nicht etwas geschrieben hat, wird der Tooltip nicht.

Answer 3

Ab Version 0.12.0 ist tooltip-tigger nicht mehr beobachtbar (Sie können es also nicht programmatisch ändern).

Sie können tooltip-enable verwenden, um das gleiche Verhalten zu erhalten. Weitere Details finden Sie hier: https://github.com/angular-ui/bootstrap/issues/3372

Answer 4

Sie können auch die tooltip-enable anstelle der tooltip-trigger auf Ihrem Feld hinzufügen.

<input 
    type="text" 
    tooltip="Invalid name!" 
    tooltip-position="right" 
    tooltip-enable="{{myForm.username.$invalid}}"> 

In diesem Fall, wenn der Benutzername ungültig ist ($ ungültig kehrt true) die Tooltip angezeigt.

Answer 5

Wie in der neuen Version Dokument werde ich vorschlagen, unter HTML zu verwenden. stewies Antwort ist nicht hilfreich mit der neuesten Version.

<input class="form-control" name="name" type="text" required ng-model="name" 
        uib-tooltip="name required" tooltip-is-open="formname.name.$invalid" 
tooltip-trigger="none" tooltip-placement="auto top" /> 

Ersetzen Sie einfach Ihre Formularnamen in tooltip-is-open="formname.name.$invalid"

Sie sind gut zu gehen.