Ativar a dica de ferramenta angular-ui em events personalizados

Eu estou tentando usar a funcionalidade de dica de ferramenta do angular-ui para mostrar ao meu usuário que um determinado campo é inválido, mas parece que a dica de ferramenta pode ser mostrada apenas em alguns triggersdores predefinidos. Existe alguma maneira pela qual eu possa acionar a dica de ferramenta, exceto os gatilhos?

Por exemplo:

 

Aqui está um truque.

As dicas de ferramentas do Twitter Bootstrap (nas quais o Angular-UI depende) têm uma opção para especificar o evento do acionador com um atributo adicional, como em data-trigger="mouseenter" . Isto dá-lhe uma maneira de alterar o gatilho programaticamente (com Angular):

  

Portanto, quando o username for $ invalid, a expressão tooltip-trigger pela tooltip-trigger será avaliada como 'mouseenter' e a dica de ferramenta será exibida. Caso contrário, o acionador será avaliado como 'never' que, por sua vez, não acionará a dica de ferramenta.

EDITAR:

@cotten (em comentários) menciona um cenário em que a dica de ferramenta fica presa e não desaparece mesmo quando o modelo é válido. Isso acontece quando o mouse permanece sobre o campo de input enquanto o texto está sendo inserido (e o modelo se torna válido). Assim que a validação do modelo for avaliada como verdadeira, a tooltip-trigger da tooltip-trigger mudará para “nunca”.

O UI Bootstrap usa um chamado triggerMap para determinar em quais events de mouse mostrar / ocultar a dica de ferramenta.

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

Como você pode ver, este mapa não sabe nada sobre o evento “never”, por isso não é possível determinar quando fechar a dica de ferramenta. Então, para fazer o truque jogar bem, só precisamos atualizar este mapa com o nosso próprio par de events e UI Bootstrap, então, saber qual evento observar para fechar a dica de ferramenta quando tooltip-trigger é definido como “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

Observação: o provedor $ tooltip é exposto pelo módulo "ui.bootstrap.tooltip" e nos permite configurar globalmente nossas dicas de ferramentas na configuração do aplicativo.

Eu tentei algo diferente

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

Dessa forma, minha dica de ferramenta só tem algo escrito quando a input é inválida e, se não tiver nada escrito, a dica de ferramenta não é exibida.

Da versão 0.12.0 em diante, o tooltip-tigger não é mais observável (portanto, você não pode alterá-lo programaticamente).

Você pode usar a opção tooltip-enable para obter o mesmo comportamento. Veja mais detalhes aqui: https://github.com/angular-ui/bootstrap/issues/3372

Você também pode adicionar a tooltip-enable da tooltip-enable vez do tooltip-trigger em seu campo.

  

Nesse caso, se o nome de usuário for inválido ($ invalid returns true ), a dica de ferramenta será exibida.

De acordo com o novo documento de versão, sugiro usar abaixo do HTML. A resposta de Stewie não é útil com a última versão.

  

Substitua apenas o nome do seu formulário em tooltip-is-open="formname.name.$invalid"

Você está pronto para ir.