diff options
author | Ryan Berliner <ryan.berliner@gmail.com> | 2021-03-07 18:09:17 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2021-03-16 08:48:50 +0300 |
commit | 99b2c0b390660b2032c3129b8ebff02fa1e034c9 (patch) | |
tree | 445328504a85ff2dc9920720494b1d7141dfa2d7 /js | |
parent | 72d23135799059d4282ea5764455f92f39ced5a5 (diff) |
only trigger tooltip inserted event on true dom insert
Diffstat (limited to 'js')
-rw-r--r-- | js/src/tooltip.js | 3 | ||||
-rw-r--r-- | js/tests/unit/tooltip.spec.js | 62 |
2 files changed, 63 insertions, 2 deletions
diff --git a/js/src/tooltip.js b/js/src/tooltip.js index de7dcca693..979bd07738 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -279,10 +279,9 @@ class Tooltip extends BaseComponent { if (!this._element.ownerDocument.documentElement.contains(this.tip)) { container.appendChild(tip) + EventHandler.trigger(this._element, this.constructor.Event.INSERTED) } - EventHandler.trigger(this._element, this.constructor.Event.INSERTED) - if (this._popper) { this._popper.update() } else { diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 1cb301c151..f9d97e3f7e 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -708,6 +708,37 @@ describe('Tooltip', () => { tooltipEl.dispatchEvent(createEvent('mouseover')) }) + it('should not hide tooltip if leave event occurs and interaction remains inside trigger', done => { + fixtureEl.innerHTML = [ + '<a href="#" rel="tooltip" title="Another tooltip">', + '<b>Trigger</b>', + 'the tooltip', + '</a>' + ] + + const tooltipEl = fixtureEl.querySelector('a') + const tooltip = new Tooltip(tooltipEl) + const triggerChild = tooltipEl.querySelector('b') + + spyOn(tooltip, 'hide').and.callThrough() + + tooltipEl.addEventListener('mouseover', () => { + const moveMouseToChildEvent = createEvent('mouseout') + Object.defineProperty(moveMouseToChildEvent, 'relatedTarget', { + value: triggerChild + }) + + tooltipEl.dispatchEvent(moveMouseToChildEvent) + }) + + tooltipEl.addEventListener('mouseout', () => { + expect(tooltip.hide).not.toHaveBeenCalled() + done() + }) + + tooltipEl.dispatchEvent(createEvent('mouseover')) + }) + it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', done => { // Style this tooltip to give it plenty of room for popper to do what it wants fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-placement="top" style="position:fixed;left:50%;top:50%;">Trigger</a>' @@ -740,6 +771,37 @@ describe('Tooltip', () => { tooltipEl.dispatchEvent(createEvent('mouseover')) }) + it('should only trigger inserted event if a new tooltip element was created', done => { + fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">' + + const tooltipEl = fixtureEl.querySelector('a') + const tooltip = new Tooltip(tooltipEl) + + spyOn(window, 'getComputedStyle').and.returnValue({ + transitionDuration: '0.15s', + transitionDelay: '0s' + }) + + const insertedFunc = jasmine.createSpy() + tooltipEl.addEventListener('inserted.bs.tooltip', insertedFunc) + + setTimeout(() => { + expect(insertedFunc).toHaveBeenCalledTimes(1) + tooltip.hide() + + setTimeout(() => { + tooltip.show() + }, 100) + + setTimeout(() => { + expect(insertedFunc).toHaveBeenCalledTimes(1) + done() + }, 200) + }, 0) + + tooltip.show() + }) + it('should show a tooltip with custom class provided in data attributes', done => { fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-custom-class="custom-class">' |