diff --git a/spec/tooltip-manager-spec.js b/spec/tooltip-manager-spec.js index 3a6b56a1b..0cf3c3e64 100644 --- a/spec/tooltip-manager-spec.js +++ b/spec/tooltip-manager-spec.js @@ -213,6 +213,18 @@ describe('TooltipManager', () => { }) ) + describe('when a user types', () => + it('hides the tooltips', () => { + const disposable = manager.add(element, { title: 'Title' }) + hover(element, function () { + expect(document.body.querySelector('.tooltip')).not.toBeNull() + window.dispatchEvent(new CustomEvent('keydown')) + expect(document.body.querySelector('.tooltip')).toBeNull() + disposable.dispose() + }) + }) + ) + describe('findTooltips', () => { it('adds and remove tooltips correctly', () => { expect(manager.findTooltips(element).length).toBe(0) diff --git a/src/tooltip.js b/src/tooltip.js index 3f21cb11a..1fe2cc5d2 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -63,19 +63,22 @@ Tooltip.prototype.init = function (element, options) { var triggers = this.options.trigger.split(' ') + this.hideOrClickOutsideOfTooltip = (event) => { + if (trigger === 'hover' || trigger === 'click' && event != undefined) { + const tooltipElement = this.getTooltipElement(); + if (tooltipElement === event.target) return; + if (tooltipElement.contains(event.target)) return; + if (this.element === event.target) return; + if (this.element.contains(event.target)) return; + this.hide() + } else { + return; + } + } for (var i = triggers.length; i--;) { var trigger = triggers[i] - if (trigger === 'click') { this.disposables.add(listen(this.element, 'click', this.options.selector, this.toggle.bind(this))) - this.hideOnClickOutsideOfTooltip = (event) => { - const tooltipElement = this.getTooltipElement() - if (tooltipElement === event.target) return - if (tooltipElement.contains(event.target)) return - if (this.element === event.target) return - if (this.element.contains(event.target)) return - this.hide() - } } else if (trigger === 'manual') { this.show() } else { @@ -93,7 +96,6 @@ Tooltip.prototype.init = function (element, options) { eventIn = 'focusin' eventOut = 'focusout' } - this.disposables.add(listen(this.element, eventIn, this.options.selector, this.enter.bind(this))) this.disposables.add(listen(this.element, eventOut, this.options.selector, this.leave.bind(this))) } @@ -183,6 +185,7 @@ Tooltip.prototype.enter = function (event) { }.bind(this), this.options.delay.show) } + Tooltip.prototype.isInStateTrue = function () { for (var key in this.inState) { if (this.inState[key]) return true @@ -216,8 +219,9 @@ Tooltip.prototype.leave = function (event) { Tooltip.prototype.show = function () { if (this.hasContent() && this.enabled) { - if (this.hideOnClickOutsideOfTooltip) { - window.addEventListener('click', this.hideOnClickOutsideOfTooltip, true) + if (this.hideOrClickOutsideOfTooltip) { + window.addEventListener('click', this.hideOrClickOutsideOfTooltip, true) + window.addEventListener('keydown', this.hideOrClickOutsideOfTooltip, true) } var tip = this.getTooltipElement() @@ -354,9 +358,9 @@ Tooltip.prototype.setContent = function () { Tooltip.prototype.hide = function (callback) { this.inState = {} - - if (this.hideOnClickOutsideOfTooltip) { - window.removeEventListener('click', this.hideOnClickOutsideOfTooltip, true) + if (this.hideOrClickOutsideOfTooltip) { + window.removeEventListener('click', this.hideOrClickOutsideOfTooltip, true) + window.removeEventListener('keydown', this.hideOrClickOutsideOfTooltip, true) } this.tip && this.tip.classList.remove('in')