CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui
vivek
vivek

Reputation: 2857

Enable angular-ui tooltip on custom events

I am trying to use angular-ui's tooltip functionality to show my user that a particular field is invalid but it seems that the tooltip can be shown only on some pre-defined triggers. Is there any way by which I can trigger the tooltip except those triggers?

For example:

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

Upvotes: 57

Views: 74573

Answers (5)

nirmal
nirmal

Reputation: 2180

As per the new version document I will suggest to use below HTML. stewie's answer is not helpful with 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 just your form name in tooltip-is-open="formname.name.$invalid"

you are good to go.

Upvotes: 1

Bruno
Bruno

Reputation: 304

From version 0.12.0 onwards, tooltip-tigger is no longer observable (so you can't change it programatically).

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

Upvotes: 9

Salma Hamed
Salma Hamed

Reputation: 2068

You can also add the tooltip-enable instead of the tooltip-trigger on 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) the tooltip will appear.

Upvotes: 5

Victor Ivens
Victor Ivens

Reputation: 2279

I tried something different

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

This way, my tooltip only has something written when the input is invalid, and if it doesn't have anything written, the tooltip doesn't show.

Upvotes: 32

Stewie
Stewie

Reputation: 60416

Here's a trick.

Twitter Bootstrap tooltips (that Angular-UI relies upon) have an option to specify the trigger event with an additional attribute as in data-trigger="mouseenter". This gives you a way of changing the trigger programmatically (with Angular):

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

So when username is $invalid, the tooltip-triggerexpression will evaluate to 'mouseenter' and tooltip will show up. Otherwise, the trigger will evaluate to 'never' which in return won't fire up the tooltip.

EDIT:

@cotten (in comments) mentions a scenario where tooltip gets stuck and won't go away even when model is valid. This happens when mouse stays over the input field while the text is being entered (and model becomes valid). As soon as model validation evaluates to true, the tooltip-triggerwill switch to "never".

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

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

As you may see, this map knows nothing about the "never" event, so it's unable to determine when to close the tooltip. So, to make out trick play nicely we only need to update this map with our own event pair and UI Bootstrap will then know what event to observe for closing the tooltip when tooltip-trigger is 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: $tooltip provider is exposed by the "ui.bootstrap.tooltip" module and it allows us to globally configure our tooltips in app configuration.

Upvotes: 107

Related Questions