Abilita il tooltip angular-ui su eventi personalizzati

Question

Sto tentando di utilizzare la funzionalità tooltip di angular-ui per mostrare al mio utente che un particolare campo non è valido ma sembra che il tooltip possa essere mostrato solo su alcuni trigger predefiniti. C'è un modo in cui posso attivare il suggerimento ad eccezione di quei trigger?

Ad esempio:

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

Answer 1

Ecco un trucco.

Twitter Bootstrap tooltips (su cui l'interfaccia utente angolare si basa) ha un'opzione per specificare l'evento di attivazione con un attributo aggiuntivo come in data-trigger="mouseenter". Questo ti dà un modo di cambiare il grilletto di programmazione (con angolare):

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

Così, quando username è $ valido, l'espressione tooltip-trigger valuteranno a 'mouseenter' e tooltip verranno visualizzati. In caso contrario, il trigger verrà valutato su 'never', che in cambio non attiverà il suggerimento.

EDIT:

@cotten (nei commenti) menziona uno scenario in cui tooltip rimane bloccata e non andrà via anche se il modello è valido. Ciò accade quando il mouse rimane sopra il campo di immissione mentre viene immesso il testo (e il modello diventa valido). Non appena la convalida del modello viene valutata come vera, lo tooltip-trigger passa a "mai".

UI Bootstrap utilizza un cosiddetto triggerMap per determinare su quali eventi del mouse mostrare/nascondere il suggerimento.

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

Come si può vedere, questa mappa non sa nulla del "mai" evento, quindi è in grado di determinare quando chiudere il tooltip. Quindi, per fare in modo che il trucco si svolga bene, abbiamo solo bisogno di aggiornare questa mappa con la nostra coppia di eventi e UI Bootstrap saprà quale evento osservare per la chiusura del suggerimento quando tooltip-trigger è impostato su "mai".

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

_{Nota: fornitore di tooltip $ è esposta dal modulo "ui.bootstrap.tooltip" e ci permette di configurare a livello globale le nostre descrizioni dei comandi in configurazione app.}

Answer 2

ho cercato qualcosa di diverso

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

In questo modo, il mio suggerimento solo è qualcosa di scritto quando l'ingresso è valido, e se non ha nulla di scritto, il tooltip non mostra.

Answer 3

Dalla versione 0.12.0 in poi, tooltip-tigger non è più osservabile (quindi non è possibile modificarlo in modo programmatico).

È possibile utilizzare tooltip-enable per ottenere lo stesso comportamento. Vedi ulteriori dettagli qui: https://github.com/angular-ui/bootstrap/issues/3372

Answer 4

È inoltre possibile aggiungere il tooltip-enable invece del tooltip-trigger sul proprio campo.

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

In questo caso se il nome utente è valido ($ rendimenti validi true) apparirà il tooltip.

Answer 5

Come per la nuova versione del documento, suggerirò di utilizzare sotto HTML. la risposta di stewie non è d'aiuto con l'ultima versione.

<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" /> 

sostituire solo il vostro nome del modulo nella tooltip-is-open="formname.name.$invalid"

siete a posto.