From 6ef70b342c27445685715f51cfcafb719356870f Mon Sep 17 00:00:00 2001
From: Ryan Berliner <ryan.berliner@gmail.com>
Date: Sat, 6 Mar 2021 23:57:23 +0200
Subject: [PATCH] prevent quick interactions from misplacing tooltips

---
 js/src/tooltip.js             | 6 +++++-
 js/tests/unit/tooltip.spec.js | 7 +++++--
 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)