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

feat(tooltip): add expression support #5938

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/popover/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions src/popover/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
4 changes: 2 additions & 2 deletions src/tooltip/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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}">
Expand All @@ -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">
Expand Down
5 changes: 3 additions & 2 deletions src/tooltip/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
37 changes: 27 additions & 10 deletions src/tooltip/test/tooltip.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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>'
);

Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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() {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down
16 changes: 14 additions & 2 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down