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

Commit 5f7051b

Browse files
tmcgee123wesleycho
authored andcommitted
feat(tooltip): allow custom closing delay
- Add support for `tooltipClosePopupDelay` for customizing close timeout Closes #3576
1 parent d4adef7 commit 5f7051b

File tree

3 files changed

+60
-1
lines changed

3 files changed

+60
-1
lines changed

src/tooltip/docs/readme.md

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ will display:
2020
- `tooltip-animation`: Should it fade in and out? Defaults to "true".
2121
- `tooltip-popup-delay`: For how long should the user have to have the mouse
2222
over the element before the tooltip shows (in milliseconds)? Defaults to 0.
23+
- `tooltip-close-popup-delay`: For how long should the tooltip remained open?
2324
- `tooltip-trigger`: What should trigger a show of the tooltip? Supports a space separated list of event names.
2425
Note: this attribute is no longer observable. See `tooltip-enable`.
2526
- `tooltip-enable`: Is it enabled? It will enable or disable the configured
@@ -63,6 +64,7 @@ methods are available:
6364
placement: 'top',
6465
animation: true,
6566
popupDelay: 0,
67+
popupCloseDelay: 500,
6668
appendToBody: false
6769
</pre>
6870

src/tooltip/test/tooltip.spec.js

+54
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,60 @@ describe('tooltip', function() {
365365
}));
366366
});
367367

368+
describe('with specified popup close delay', function() {
369+
var $timeout;
370+
beforeEach(inject(function($compile, _$timeout_) {
371+
$timeout = _$timeout_;
372+
scope.delay = '1000';
373+
elm = $compile(angular.element(
374+
'<span uib-tooltip="tooltip text" tooltip-popup-close-delay="{{delay}}" ng-disabled="disabled">Selector Text</span>'
375+
))(scope);
376+
elmScope = elm.scope();
377+
tooltipScope = elmScope.$$childTail;
378+
scope.$digest();
379+
}));
380+
381+
it('should close after timeout', function() {
382+
trigger(elm, 'mouseenter');
383+
expect(tooltipScope.isOpen).toBe(true);
384+
trigger(elm, 'mouseleave');
385+
$timeout.flush();
386+
expect(tooltipScope.isOpen).toBe(false);
387+
});
388+
389+
it('should use default popup close delay if specified delay is not a number and close after delay', function() {
390+
scope.delay = 'text1000';
391+
scope.$digest();
392+
trigger(elm, 'mouseenter');
393+
expect(tooltipScope.popupCloseDelay).toBe(500);
394+
expect(tooltipScope.isOpen).toBe(true);
395+
trigger(elm, 'mouseleave');
396+
$timeout.flush();
397+
expect(tooltipScope.isOpen).toBe(false);
398+
});
399+
400+
it('should open when not disabled after being disabled and close after delay - issue #4204', function() {
401+
trigger(elm, 'mouseenter');
402+
expect(tooltipScope.isOpen).toBe(true);
403+
404+
elmScope.disabled = true;
405+
elmScope.$digest();
406+
407+
$timeout.flush(500);
408+
expect(tooltipScope.isOpen).toBe(false);
409+
410+
elmScope.disabled = false;
411+
elmScope.$digest();
412+
413+
trigger(elm, 'mouseenter');
414+
415+
expect(tooltipScope.isOpen).toBe(true);
416+
trigger(elm, 'mouseleave');
417+
$timeout.flush();
418+
expect(tooltipScope.isOpen).toBe(false);
419+
});
420+
});
421+
368422
describe('with an is-open attribute', function() {
369423
beforeEach(inject(function ($compile) {
370424
scope.isOpen = false;

src/tooltip/tooltip.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
1515
placement: 'top',
1616
animation: true,
1717
popupDelay: 0,
18+
popupCloseDelay: 500,
1819
useContentExp: false
1920
};
2021

@@ -265,7 +266,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
265266
// FIXME: this is a placeholder for a port of the transitions library.
266267
if (ttScope.animation) {
267268
if (!transitionTimeout) {
268-
transitionTimeout = $timeout(removeTooltip, 500);
269+
transitionTimeout = $timeout(removeTooltip, ttScope.popupCloseDelay);
269270
}
270271
} else {
271272
removeTooltip();
@@ -321,7 +322,9 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
321322
ttScope.placement = angular.isDefined(attrs[prefix + 'Placement']) ? attrs[prefix + 'Placement'] : options.placement;
322323

323324
var delay = parseInt(attrs[prefix + 'PopupDelay'], 10);
325+
var closeDelay = parseInt(attrs[prefix + 'PopupCloseDelay'], 10);
324326
ttScope.popupDelay = !isNaN(delay) ? delay : options.popupDelay;
327+
ttScope.popupCloseDelay = !isNaN(closeDelay) ? closeDelay : options.popupCloseDelay;
325328
}
326329

327330
ttScope.contentExp = function() {

0 commit comments

Comments
 (0)