Habilitar la información sobre herramientas de angular-ui en eventos personalizados

Intento utilizar la información de herramientas de angular-ui para mostrarle a mi usuario que un campo en particular no es válido, pero parece que la información sobre herramientas solo se puede mostrar en algunos desencadenadores predefinidos. ¿Hay alguna manera por la que puedo activar la información sobre herramientas excepto esos disparadores?

Por ejemplo:

 

Aquí hay un truco.

La información sobre herramientas de Twitter Bootstrap (en la que se basa Angular-UI) tiene una opción para especificar el evento desencadenante con un atributo adicional como en data-trigger="mouseenter" . Esto le proporciona una forma de cambiar el desencadenador programáticamente (con Angular):

  

Entonces, cuando el username es $ invalid, la expresión tooltip-trigger se evaluará como 'mouseenter' y se mostrará la información sobre herramientas. De lo contrario, el disparador evaluará 'never' que a su vez no activará la información sobre herramientas.

EDITAR:

@cotten (en los comentarios) menciona un escenario donde la información sobre herramientas se atasca y no desaparecerá, incluso cuando el modelo sea válido. Esto sucede cuando el mouse se queda sobre el campo de entrada mientras se ingresa el texto (y el modelo se vuelve válido). Tan pronto como la validación del modelo se evalúe como verdadera, el tooltip-trigger cambiará a “nunca”.

UI Bootstrap usa un llamado triggerMap para determinar en qué eventos del mouse mostrar / ocultar la información sobre herramientas.

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

Como puede ver, este mapa no sabe nada sobre el evento “nunca”, por lo que no puede determinar cuándo cerrar la información sobre herramientas. Entonces, para distinguir bien el truco, solo necesitamos actualizar este mapa con nuestro propio par de eventos y UI Bootstrap sabrá qué evento observar para cerrar la información sobre herramientas cuando tooltip-trigger esté establecido en “nunca”.

 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: El proveedor de $ tooltip está expuesto por el módulo "ui.bootstrap.tooltip" y nos permite configurar globalmente nuestros tooltips en la configuración de la aplicación.

Probé algo diferente

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

De esta forma, mi información sobre herramientas solo tiene algo escrito cuando la entrada no es válida, y si no tiene nada escrito, la información sobre herramientas no se muestra.

A partir de la versión 0.12.0, tooltip-tigger ya no es observable (por lo tanto, no puede cambiarlo programáticamente).

Puede usar tooltip-enable para obtener el mismo comportamiento. Vea más detalles aquí: https://github.com/angular-ui/bootstrap/issues/3372

También puede agregar el tooltip-enable lugar del tooltip-trigger en su campo.

  

En este caso, si el nombre de usuario no es válido ($ invalid devuelve true ) aparecerá la información sobre herramientas.

De acuerdo con el nuevo documento de la versión, sugeriré usar debajo HTML. La respuesta de stewie no es útil con la última versión.

  

Reemplace solo el nombre de su formulario en tooltip-is-open="formname.name.$invalid"

tú eres bueno para irte.