From 4b912228bec5f2aa08e872156159623bf7c6fbc9 Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Sat, 28 May 2016 17:52:09 -0700 Subject: [PATCH] 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 | 4 ++-- src/popover/docs/readme.md | 5 +++-- src/tooltip/docs/demo.html | 4 ++-- src/tooltip/docs/readme.md | 5 +++-- src/tooltip/test/tooltip.spec.js | 37 +++++++++++++++++++++++--------- src/tooltip/tooltip.js | 16 ++++++++++++-- 6 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html index 6eea4abf74..389c0cf133 100644 --- a/src/popover/docs/demo.html +++ b/src/popover/docs/demo.html @@ -34,9 +34,9 @@

Positional

Triggers

- +

- +

Other

diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md index 5dc8317791..59a9982326 100644 --- a/src/popover/docs/readme.md +++ b/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). + $ + _(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). diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html index 0e55133d63..4ccc41f512 100644 --- a/src/tooltip/docs/demo.html +++ b/src/tooltip/docs/demo.html @@ -51,7 +51,7 @@
- +
@@ -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" />
diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md index d4cb4be977..d85fb47221 100644 --- a/src/tooltip/docs/readme.md +++ b/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). + $ + _(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). diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js index 870c67d461..ddb3a9a0c9 100644 --- a/src/tooltip/test/tooltip.spec.js +++ b/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( - '
' + '
' ); $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( - '
' + '
' ); $compile(elmBody)(scope); scope.$apply(); @@ -540,8 +540,8 @@ describe('tooltip', function() { scope.test = true; elmBody = angular.element( '
' + - '' + - '' + + '' + + '' + '
' ); @@ -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( - '
' + '
' ); $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( - '
' + '
' ); $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( - 'Selector Text' + 'Selector Text' ))(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( + '
' + ); + $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('
'); + elmBody = angular.element('
'); $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( - '
' + '
' ); $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( - '
' + '
' ); scope = $rootScope; diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index bdee80415d..cb3a508561 100644 --- a/src/tooltip/tooltip.js +++ b/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) {