Fix tooltip when hovering a children element (delegateTarget) (#30928)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

3 files changed, 33 insertions, 9 deletions

diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index b766778588..5fea030182 100644
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -94,6 +94,7 @@ function getEvent(element) {
 
 function bootstrapHandler(element, fn) {
   return function handler(event) {
+    event.delegateTarget = element
     if (handler.oneOff) {
       EventHandler.off(element, event.type, fn)
     }
@@ -109,6 +110,7 @@ function bootstrapDelegationHandler(element, selector, fn) {
     for (let { target } = event; target && target !== this; target = target.parentNode) {
       for (let i = domElements.length; i--;) {
         if (domElements[i] === target) {
+          event.delegateTarget = target
           if (handler.oneOff) {
             EventHandler.off(element, event.type, fn)
           }
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index d76679a6a0..64011796de 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -194,14 +194,14 @@ class Tooltip {
 
     if (event) {
       const dataKey = this.constructor.DATA_KEY
-      let context = Data.getData(event.target, dataKey)
+      let context = Data.getData(event.delegateTarget, dataKey)
 
       if (!context) {
         context = new this.constructor(
-          event.target,
+          event.delegateTarget,
           this._getDelegateConfig()
         )
-        Data.setData(event.target, dataKey, context)
+        Data.setData(event.delegateTarget, dataKey, context)
       }
 
       context._activeTrigger.click = !context._activeTrigger.click
@@ -587,14 +587,14 @@ class Tooltip {
 
   _enter(event, context) {
     const dataKey = this.constructor.DATA_KEY
-    context = context || Data.getData(event.target, dataKey)
+    context = context || Data.getData(event.delegateTarget, dataKey)
 
     if (!context) {
       context = new this.constructor(
-        event.target,
+        event.delegateTarget,
         this._getDelegateConfig()
       )
-      Data.setData(event.target, dataKey, context)
+      Data.setData(event.delegateTarget, dataKey, context)
     }
 
     if (event) {
@@ -627,14 +627,14 @@ class Tooltip {
 
   _leave(event, context) {
     const dataKey = this.constructor.DATA_KEY
-    context = context || Data.getData(event.target, dataKey)
+    context = context || Data.getData(event.delegateTarget, dataKey)
 
     if (!context) {
       context = new this.constructor(
-        event.target,
+        event.delegateTarget,
         this._getDelegateConfig()
       )
-      Data.setData(event.target, dataKey, context)
+      Data.setData(event.delegateTarget, dataKey, context)
     }
 
     if (event) {
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index e713fe5602..0a98096a40 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -324,6 +324,28 @@ describe('Tooltip', () => {
       tooltip.show()
     })
 
+    it('should show a tooltip when hovering a children element', done => {
+      fixtureEl.innerHTML =
+        '<a href="#" rel="tooltip" title="Another tooltip">' +
+          '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">' +
+            '<rect width="100%" fill="#563d7c"/>' +
+            '<circle cx="50" cy="50" r="30" fill="#fff"/>' +
+          '</svg>' +
+        '</a>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      spyOn(tooltip, 'show')
+
+      tooltipEl.querySelector('rect').dispatchEvent(createEvent('mouseover', { bubbles: true }))
+
+      setTimeout(() => {
+        expect(tooltip.show).toHaveBeenCalled()
+        done()
+      }, 0)
+    })
+
     it('should show a tooltip on mobile', done => {
       fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'