prevent quick interactions from misplacing tooltips

2 files changed, 10 insertions, 3 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index e9f9bfff1b..857f72c8ad 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -283,6 +283,10 @@ class Tooltip extends BaseComponent {
 
     EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
 
+    if (this._popper) {
+      this._popper.destroy()
+    }
+
     this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
 
     tip.classList.add(CLASS_NAME_SHOW)
@@ -650,7 +654,7 @@ class Tooltip extends BaseComponent {
     if (event) {
       context._activeTrigger[
         event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
-      ] = false
+      ] = context._element.contains(event.relatedTarget)
     }
 
     if (context._isWithActiveTrigger()) {
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 41f73d6d8a..1cb301c151 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -708,8 +708,9 @@ describe('Tooltip', () => {
       tooltipEl.dispatchEvent(createEvent('mouseover'))
     })
 
-    it('should not hide tooltip if leave event occurs and enter event occurs during hide transition', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+    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>'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -721,6 +722,7 @@ describe('Tooltip', () => {
 
       setTimeout(() => {
         expect(tooltip._popper).not.toBeNull()
+        expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
         tooltipEl.dispatchEvent(createEvent('mouseout'))
 
         setTimeout(() => {
@@ -730,6 +732,7 @@ describe('Tooltip', () => {
 
         setTimeout(() => {
           expect(tooltip._popper).not.toBeNull()
+          expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
           done()
         }, 200)
       }, 0)