feat(tooltip): add expression support

- Add expression support for tooltip-trigger
- Add support for object event bindings for showing/hiding tooltips

BREAKING CHANGE: This removes support for plain strings and interpolations in tooltip-trigger and popover-trigger - please change these appropriately. See test changes in this commit for reference

Closes #5221
Closes #5938

src/popover/docs/demo.html

@@ -34,9 +34,9 @@ <h4>Positional</h4>
     <hr />
     <h4>Triggers</h4>
     <p>
-      <button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
+      <button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-default">Mouseenter</button>
     </p>
-    <input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
+    <input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="'focus'" class="form-control">
 
     <hr />
     <h4>Other</h4>

src/popover/docs/readme.md

@@ -76,8 +76,9 @@ All these settings are available for the three types of popovers.
    A string to display as a fancy title.
 
 * `popover-trigger`
-  _(Default: `click`)_ -
-  What should trigger a show of the popover? Supports a space separated list of event names (see below).
+  <small class="badge">$</small>
+  _(Default: `'click'`)_ -
+  What should trigger a show of the popover? Supports a space separated list of event names, or objects (see below).
 
 **Note:** To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).
 

src/tooltip/docs/demo.html

@@ -51,7 +51,7 @@
 
     <div class="form-group">
       <label>Or use custom triggers, like focus: </label>
-      <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
+      <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="'focus'" tooltip-placement="right" class="form-control" />
     </div>
 
     <div class="form-group" ng-class="{'has-error' : !inputModel}">
@@ -60,7 +60,7 @@
              placeholder="Hover over this for a tooltip until this is filled"
              uib-tooltip="Enter something in this input field to disable this tooltip"
              tooltip-placement="top"
-             tooltip-trigger="mouseenter"
+             tooltip-trigger="'mouseenter'"
              tooltip-enable="!inputModel" />
     </div>
     <div class="form-group">

src/tooltip/docs/readme.md

@@ -74,8 +74,9 @@ All these settings are available for the three types of tooltips.
   Popup delay in milliseconds until it opens.
 
 * `tooltip-trigger`
-  _(Default: `mouseenter`)_ -
-  What should trigger a show of the tooltip? Supports a space separated list of event names (see below).
+  <small class="badge">$</small>
+  _(Default: `'mouseenter'`)_ -
+  What should trigger a show of the tooltip? Supports a space separated list of event names, or objects (see below).
 
 **Note:** To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).
 

src/tooltip/test/tooltip.spec.js

@@ -504,7 +504,7 @@ describe('tooltip', function() {
 
     it('should use it to show but set the hide trigger based on the map for mapped triggers', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input uib-tooltip="Hello!" tooltip-trigger="focus" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="\'focus\'" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -521,7 +521,7 @@ describe('tooltip', function() {
 
     it('should use it as both the show and hide triggers for unmapped triggers', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input uib-tooltip="Hello!" tooltip-trigger="fakeTriggerAttr" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="\'fakeTriggerAttr\'" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -540,8 +540,8 @@ describe('tooltip', function() {
       scope.test = true;
       elmBody = angular.element(
         '<div>' +
-          '<input uib-tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
-          '<input uib-tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
+          '<input uib-tooltip="Hello!" tooltip-trigger="test && \'mouseenter\' || \'click\'" />' +
+          '<input uib-tooltip="Hello!" tooltip-trigger="test && \'mouseenter\' || \'click\'" />' +
         '</div>'
       );
 
@@ -566,7 +566,7 @@ describe('tooltip', function() {
 
     it('should accept multiple triggers based on the map for mapped triggers', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input uib-tooltip="Hello!" tooltip-trigger="focus fakeTriggerAttr" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="\'focus fakeTriggerAttr\'" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -587,7 +587,7 @@ describe('tooltip', function() {
 
     it('should not show when trigger is set to "none"', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input uib-tooltip="Hello!" tooltip-trigger="none" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="\'none\'" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -601,7 +601,7 @@ describe('tooltip', function() {
 
     it('should toggle on click and hide when anything else is clicked when trigger is set to "outsideClick"', inject(function($compile, $document) {
       elm = $compile(angular.element(
-        '<span uib-tooltip="tooltip text" tooltip-trigger="outsideClick">Selector Text</span>'
+        '<span uib-tooltip="tooltip text" tooltip-trigger="\'outsideClick\'">Selector Text</span>'
       ))(scope);
       scope.$apply();
       elmScope = elm.scope();
@@ -623,6 +623,23 @@ describe('tooltip', function() {
       tooltipScope.$digest();
       expect(tooltipScope.isOpen).toBeFalsy();
     }));
+
+    it('should support objects', inject(function($compile) {
+      elmBody = angular.element(
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="{show: \'hide\'}" /></div>'
+      );
+      $compile(elmBody)(scope);
+      scope.$apply();
+      elm = elmBody.find('input');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      expect(tooltipScope.isOpen).toBeFalsy();
+      trigger(elm, 'show');
+      expect(tooltipScope.isOpen).toBeTruthy();
+      trigger(elm, 'hide');
+      expect(tooltipScope.isOpen).toBeFalsy();
+    }));
   });
 
   describe('with an append-to-body attribute', function() {
@@ -673,7 +690,7 @@ describe('tooltip', function() {
     }
 
     beforeEach(inject(function($compile, $rootScope) {
-      elmBody = angular.element('<div><input uib-tooltip="Hello!" tooltip-trigger="fooTrigger" /></div>');
+      elmBody = angular.element('<div><input uib-tooltip="Hello!" tooltip-trigger="\'fooTrigger\'" /></div>');
 
       $compile(elmBody)($rootScope);
       $rootScope.$apply();
@@ -754,7 +771,7 @@ describe('tooltipWithDifferentSymbols', function() {
 
     it('should show the correct tooltip text', inject(function($compile, $rootScope) {
       elmBody = angular.element(
-        '<div><input type="text" uib-tooltip="My tooltip" tooltip-trigger="focus" tooltip-placement="right" /></div>'
+        '<div><input type="text" uib-tooltip="My tooltip" tooltip-trigger="\'focus\'" tooltip-placement="right" /></div>'
       );
       $compile(elmBody)($rootScope);
       $rootScope.$apply();
@@ -1030,7 +1047,7 @@ describe('$uibTooltipProvider', function() {
 
       it('should override the show and hide triggers if there is an attribute', inject(function($rootScope, $compile) {
         elmBody = angular.element(
-          '<div><input uib-tooltip="tooltip text" tooltip-trigger="mouseenter"/></div>'
+          '<div><input uib-tooltip="tooltip text" tooltip-trigger="\'mouseenter\'"/></div>'
         );
 
         scope = $rootScope;

src/tooltip/tooltip.js

@@ -496,10 +496,22 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
             };
 
             function prepTriggers() {
-              var val = attrs[prefix + 'Trigger'];
+              var showTriggers = [], hideTriggers = [];
+              var val = scope.$eval(attrs[prefix + 'Trigger']);
               unregisterTriggers();
 
-              triggers = getTriggers(val);
+              if (angular.isObject(val)) {
+                Object.keys(val).forEach(function(key) {
+                  showTriggers.push(key);
+                  hideTriggers.push(val[key]);
+                });
+                triggers = {
+                  show: showTriggers,
+                  hide: hideTriggers
+                };
+              } else {
+                triggers = getTriggers(val);
+              }
 
               if (triggers.show !== 'none') {
                 triggers.show.forEach(function(trigger, idx) {