Activer l’info-bulle angular-ui sur les événements personnalisés

J’essaie d’utiliser la fonctionnalité d’info-bulle d’angular-ui pour montrer à mon utilisateur qu’un champ particulier est invalide, mais il semble que l’info-bulle ne peut être affichée que sur certains déclencheurs prédéfinis. Existe-t-il un moyen de déclencher l’info-bulle, à l’exception de ces déclencheurs?

Par exemple:

 

Voici un truc

Les info-bulles Twitter Bootstrap (sur lesquelles s’appuie Angular-UI) ont la possibilité de spécifier l’événement déclencheur avec un atsortingbut supplémentaire comme dans data-sortinggger="mouseenter" . Cela vous permet de modifier le déclencheur par programmation (avec Angular):

  

Ainsi, lorsque le username est $ invalide, l’expression tooltip-sortinggger sera évaluée à 'mouseenter' et l’info-bulle apparaîtra. Sinon, le déclencheur évaluera à 'never' ce qui en retour ne déclenchera pas l’info-bulle.

MODIFIER:

@cotten (dans les commentaires) mentionne un scénario où l’info-bulle rest bloquée et ne disparaîtra pas même si le modèle est valide. Cela se produit lorsque la souris rest sur le champ de saisie pendant que le texte est entré (et que le modèle devient valide). Dès que la validation du modèle est évaluée à true, le tooltip-sortinggger passera à “jamais”.

UI Bootstrap utilise un sortingggerMap pour déterminer sur quels événements de souris afficher / masquer l’info-bulle.

 // Default hide sortingggers for each show sortinggger var sortingggerMap = { 'mouseenter': 'mouseleave', 'click': 'click', 'focus': 'blur' }; 

Comme vous pouvez le voir, cette carte ne sait rien de l’événement “never”, il est donc impossible de déterminer à quel moment fermer l’infobulle. Donc, pour bien faire le jeu, il suffit de mettre à jour cette carte avec notre propre paire d’événements et UI Bootstrap saura alors quel événement observer pour fermer l’info-bulle lorsque tooltip-sortinggger est défini sur “jamais”.

 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

Remarque: Le fournisseur $ tooltip est exposé par le module "ui.bootstrap.tooltip" et nous permet de configurer globalement nos info-bulles dans la configuration de l'application.

J’ai essayé quelque chose de différent

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

De cette façon, mon infobulle ne contient que quelque chose d’écrit lorsque l’entrée n’est pas valide et s’il n’a rien d’écrit, l’infobulle ne s’affiche pas.

À partir de la version 0.12.0, tooltip-tigger n’est plus observable (vous ne pouvez donc pas le modifier par programmation).

Vous pouvez utiliser tooltip-enable pour obtenir le même comportement. Voir plus de détails ici: https://github.com/angular-ui/bootstrap/issues/3372

Vous pouvez également append tooltip-enable au lieu de tooltip-sortinggger sur votre champ.

  

Dans ce cas, si le nom d’utilisateur est invalide ($ invalide renvoie true ), l’info-bulle apparaîtra.

Selon le nouveau document de version, je suggérerai d’utiliser ci-dessous HTML. La réponse de stewie n’est pas utile avec la dernière version.

  

Remplacez simplement le nom de votre formulaire dans tooltip-is-open="formname.name.$invalid"

tu es prêt.