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

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

diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index b76677858885bbf0395b308423c1f3667707c7c4..5fea03018288eaabc8d6eda46cdccaac111461ab 100644 (file)
--- 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 d76679a6a09ba207512d37fb9f7b8015f8d5f34f..64011796de39c5ad883d30b2a9c10ea860aff211 100644 (file)
--- 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 e713fe560202a0a5d146d7294f59204e3a98aa65..0a98096a405ecc25e2c9e595f1bfcbefa1aaa78e 100644 (file)
--- 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">'
 

diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index 384be8781873b64111c4afb427d7cfd69c34e49e..19d95e0281d77c17e1ae06a6515ae719dc018fc0 100644 (file)
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -81,6 +81,17 @@ And with custom HTML added:
 </button>
 {{< /highlight >}}
 
+With an SVG:
+
+<div class="bd-example tooltip-demo">
+  <a href="#" data-toggle="tooltip" title="Default tooltip">
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
+      <rect width="100%" height="100%" fill="#563d7c"/>
+      <circle cx="50" cy="50" r="30" fill="#007bff"/>
+    </svg>
+  </a>
+</div>
+
 ## Usage
 
 The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.