Enable angular-ui tooltip on custom events

by

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.

More Related Contents:

  1. How to use a keypress event in AngularJS?
  2. angularjs share data config between controllers
  3. How to detect browser using angularjs?
  4. angularjs text area character counter
  5. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  6. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  7. How can I dynamically add a directive in AngularJS?
  8. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  9. How to select an element by classname using jqLite?
  10. AngularJS ng-style with a conditional expression
  11. Confused about Angularjs transcluded and isolate scopes & bindings
  12. Rendering directives within $sce.trustAsHtml
  13. How to allow only a number (digits and decimal point) to be typed in an input?
  14. Angular directive how to add an attribute to the element?
  15. How to understand the `terminal` of directive?
  16. How can I test events in angular?
  17. AngularJS : ng-repeat filter when value is greater than
  18. AngularJS Group By Directive without External Dependencies
  19. AngularJS watch DOM change
  20. How do I apply an AngularJS directive based on a class set by ng-class?
  21. $apply vs $digest in directive testing
  22. How to use “ng-repeat” within template of a directive in Angular JS?
  23. How to tie angular-ui’s typeahead with a server via $http for server side optimization?
  24. Bind class toggle to window scroll event
  25. Angular adds strange options into select element when setting model value
  26. Angular directive for a fallback image
  27. What is ng-transclude?
  28. AngularJS. Convert tag value (Unix time to human-readable time)
  29. How to implement an ng-change for a custom directive
  30. When to use double braces {{}} in angularJS

Leave a Comment