Enable angular -ui hint for custom events

Question

I am trying to use the angular -ui tooltip functionality to show my user that a specific field is not valid, but it seems that a tooltip can only be displayed on some predefined triggers. Is there any way I can trigger a tooltip other than these triggers?

For example:

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

Answer 1

Here is the trick.

Twitter prompts Bootstrap (for Angular-UI) it is possible to specify a trigger event with an additional attribute, as in data-trigger="mouseenter" . This gives you the ability to programmatically change the trigger (using Angular):

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

Therefore, when username not valid in $, the expression tooltip-trigger will evaluate to 'mouseenter' and a tooltip will appear. Otherwise, the trigger will evaluate to 'never' , which in turn does not trigger a tooltip.

EDIT:

@cotten (in the comments) mentions a scenario in which the tooltip gets stuck and does not disappear, even if the model is valid. This happens when the mouse stays above the input field during text input (and the model becomes valid). Once the model check evaluates to true, tooltip-trigger switch to never.

UI Bootstrap uses the so-called triggerMap to determine which mouse events show / hide the tooltip.

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

As you can see, this card does not know anything about the "never" event, so it cannot determine when to close the tooltip. So, to see the trick, we only need to update this map with our own pair of events, and UI Bootstrap then finds out which event to watch when the tooltip-trigger closes when the tooltip-trigger set to never.

 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

_{Note. The $ tooltip provider is set by the "ui.bootstrap.tooltip" module, and it allows us to globally configure tooltips in the application configuration.}

Answer 2

I tried something else

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

So my tooltip has just been written when the input is invalid, and if it doesn't have anything written, the tooltip is not displayed.

Answer 3

Starting with version 0.12.0, tooltip-tigger stops being monitored (therefore you cannot change it programmatically).

You can use tooltip-enable to get the same behavior. More details here: https://github.com/angular-ui/bootstrap/issues/3372

Answer 4

You can also add tooltip-enable instead of tooltip-trigger in your field.

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

In this case, if the username is invalid ($ invalid returns true ), a tooltip will appear.

Answer 5

According to the new version document, I suggest using below HTML. The answer to stewie will not help with the latest 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" /> 

Replace only the name of your form in tooltip-is-open="formname.name.$invalid"

you are good to go.