Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 4b91222

Browse files
wesleychowesleycho
committed
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
1 parent 9a606dc commit 4b91222

File tree

6 files changed

+51
-20
lines changed

6 files changed

+51
-20
lines changed

‎src/popover/docs/demo.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ <h4>Positional</h4>
3434
<hr />
3535
<h4>Triggers</h4>
3636
<p>
37-
<button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
37+
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-default">Mouseenter</button>
3838
</p>
39-
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control">
39+
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'focus'" class="form-control">
4040

4141
<hr />
4242
<h4>Other</h4>

‎src/popover/docs/readme.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,9 @@ All these settings are available for the three types of popovers.
7676
A string to display as a fancy title.
7777

7878
* `popover-trigger`
79-
_(Default: `click`)_ -
80-
What should trigger a show of the popover? Supports a space separated list of event names (see below).
79+
<small class="badge">$</small>
80+
_(Default: `'click'`)_ -
81+
What should trigger a show of the popover? Supports a space separated list of event names, or objects (see below).
8182

8283
**Note:** To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).
8384

‎src/tooltip/docs/demo.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151

5252
<div class="form-group">
5353
<label>Or use custom triggers, like focus: </label>
54-
<input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
54+
<input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="'focus'" tooltip-placement="right" class="form-control" />
5555
</div>
5656

5757
<div class="form-group" ng-class="{'has-error' : !inputModel}">
@@ -60,7 +60,7 @@
6060
placeholder="Hover over this for a tooltip until this is filled"
6161
uib-tooltip="Enter something in this input field to disable this tooltip"
6262
tooltip-placement="top"
63-
tooltip-trigger="mouseenter"
63+
tooltip-trigger="'mouseenter'"
6464
tooltip-enable="!inputModel" />
6565
</div>
6666
<div class="form-group">

‎src/tooltip/docs/readme.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,9 @@ All these settings are available for the three types of tooltips.
7474
Popup delay in milliseconds until it opens.
7575

7676
* `tooltip-trigger`
77-
_(Default: `mouseenter`)_ -
78-
What should trigger a show of the tooltip? Supports a space separated list of event names (see below).
77+
<small class="badge">$</small>
78+
_(Default: `'mouseenter'`)_ -
79+
What should trigger a show of the tooltip? Supports a space separated list of event names, or objects (see below).
7980

8081
**Note:** To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).
8182

‎src/tooltip/test/tooltip.spec.js

+27-10
Original file line numberDiff line numberDiff line change
@@ -504,7 +504,7 @@ describe('tooltip', function() {
504504

505505
it('should use it to show but set the hide trigger based on the map for mapped triggers', inject(function($compile) {
506506
elmBody = angular.element(
507-
'<div><input uib-tooltip="Hello!" tooltip-trigger="focus" /></div>'
507+
'<div><input uib-tooltip="Hello!" tooltip-trigger="\'focus\'" /></div>'
508508
);
509509
$compile(elmBody)(scope);
510510
scope.$apply();
@@ -521,7 +521,7 @@ describe('tooltip', function() {
521521

522522
it('should use it as both the show and hide triggers for unmapped triggers', inject(function($compile) {
523523
elmBody = angular.element(
524-
'<div><input uib-tooltip="Hello!" tooltip-trigger="fakeTriggerAttr" /></div>'
524+
'<div><input uib-tooltip="Hello!" tooltip-trigger="\'fakeTriggerAttr\'" /></div>'
525525
);
526526
$compile(elmBody)(scope);
527527
scope.$apply();
@@ -540,8 +540,8 @@ describe('tooltip', function() {
540540
scope.test = true;
541541
elmBody = angular.element(
542542
'<div>' +
543-
'<input uib-tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
544-
'<input uib-tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
543+
'<input uib-tooltip="Hello!" tooltip-trigger="test && \'mouseenter\' || \'click\'" />' +
544+
'<input uib-tooltip="Hello!" tooltip-trigger="test && \'mouseenter\' || \'click\'" />' +
545545
'</div>'
546546
);
547547

@@ -566,7 +566,7 @@ describe('tooltip', function() {
566566

567567
it('should accept multiple triggers based on the map for mapped triggers', inject(function($compile) {
568568
elmBody = angular.element(
569-
'<div><input uib-tooltip="Hello!" tooltip-trigger="focus fakeTriggerAttr" /></div>'
569+
'<div><input uib-tooltip="Hello!" tooltip-trigger="\'focus fakeTriggerAttr\'" /></div>'
570570
);
571571
$compile(elmBody)(scope);
572572
scope.$apply();
@@ -587,7 +587,7 @@ describe('tooltip', function() {
587587

588588
it('should not show when trigger is set to "none"', inject(function($compile) {
589589
elmBody = angular.element(
590-
'<div><input uib-tooltip="Hello!" tooltip-trigger="none" /></div>'
590+
'<div><input uib-tooltip="Hello!" tooltip-trigger="\'none\'" /></div>'
591591
);
592592
$compile(elmBody)(scope);
593593
scope.$apply();
@@ -601,7 +601,7 @@ describe('tooltip', function() {
601601

602602
it('should toggle on click and hide when anything else is clicked when trigger is set to "outsideClick"', inject(function($compile, $document) {
603603
elm = $compile(angular.element(
604-
'<span uib-tooltip="tooltip text" tooltip-trigger="outsideClick">Selector Text</span>'
604+
'<span uib-tooltip="tooltip text" tooltip-trigger="\'outsideClick\'">Selector Text</span>'
605605
))(scope);
606606
scope.$apply();
607607
elmScope = elm.scope();
@@ -623,6 +623,23 @@ describe('tooltip', function() {
623623
tooltipScope.$digest();
624624
expect(tooltipScope.isOpen).toBeFalsy();
625625
}));
626+
627+
it('should support objects', inject(function($compile) {
628+
elmBody = angular.element(
629+
'<div><input uib-tooltip="Hello!" tooltip-trigger="{show: \'hide\'}" /></div>'
630+
);
631+
$compile(elmBody)(scope);
632+
scope.$apply();
633+
elm = elmBody.find('input');
634+
elmScope = elm.scope();
635+
tooltipScope = elmScope.$$childTail;
636+
637+
expect(tooltipScope.isOpen).toBeFalsy();
638+
trigger(elm, 'show');
639+
expect(tooltipScope.isOpen).toBeTruthy();
640+
trigger(elm, 'hide');
641+
expect(tooltipScope.isOpen).toBeFalsy();
642+
}));
626643
});
627644

628645
describe('with an append-to-body attribute', function() {
@@ -673,7 +690,7 @@ describe('tooltip', function() {
673690
}
674691

675692
beforeEach(inject(function($compile, $rootScope) {
676-
elmBody = angular.element('<div><input uib-tooltip="Hello!" tooltip-trigger="fooTrigger" /></div>');
693+
elmBody = angular.element('<div><input uib-tooltip="Hello!" tooltip-trigger="\'fooTrigger\'" /></div>');
677694

678695
$compile(elmBody)($rootScope);
679696
$rootScope.$apply();
@@ -754,7 +771,7 @@ describe('tooltipWithDifferentSymbols', function() {
754771

755772
it('should show the correct tooltip text', inject(function($compile, $rootScope) {
756773
elmBody = angular.element(
757-
'<div><input type="text" uib-tooltip="My tooltip" tooltip-trigger="focus" tooltip-placement="right" /></div>'
774+
'<div><input type="text" uib-tooltip="My tooltip" tooltip-trigger="\'focus\'" tooltip-placement="right" /></div>'
758775
);
759776
$compile(elmBody)($rootScope);
760777
$rootScope.$apply();
@@ -1030,7 +1047,7 @@ describe('$uibTooltipProvider', function() {
10301047

10311048
it('should override the show and hide triggers if there is an attribute', inject(function($rootScope, $compile) {
10321049
elmBody = angular.element(
1033-
'<div><input uib-tooltip="tooltip text" tooltip-trigger="mouseenter"/></div>'
1050+
'<div><input uib-tooltip="tooltip text" tooltip-trigger="\'mouseenter\'"/></div>'
10341051
);
10351052

10361053
scope = $rootScope;

‎src/tooltip/tooltip.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -496,10 +496,22 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
496496
};
497497

498498
function prepTriggers() {
499-
var val = attrs[prefix + 'Trigger'];
499+
var showTriggers = [], hideTriggers = [];
500+
var val = scope.$eval(attrs[prefix + 'Trigger']);
500501
unregisterTriggers();
501502

502-
triggers = getTriggers(val);
503+
if (angular.isObject(val)) {
504+
Object.keys(val).forEach(function(key) {
505+
showTriggers.push(key);
506+
hideTriggers.push(val[key]);
507+
});
508+
triggers = {
509+
show: showTriggers,
510+
hide: hideTriggers
511+
};
512+
} else {
513+
triggers = getTriggers(val);
514+
}
503515

504516
if (triggers.show !== 'none') {
505517
triggers.show.forEach(function(trigger, idx) {

0 commit comments

Comments
 (0)