From 308fb32944c965152bc15a73803988cfd4ea66c7 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Sat, 30 May 2020 21:34:52 +0200 Subject: [PATCH 1/3] Fix tooltip when hovering a children element (delegateTarget) --- js/src/dom/event-handler.js | 2 ++ js/src/tooltip.js | 18 ++++++++-------- js/tests/unit/tooltip.spec.js | 22 ++++++++++++++++++++ site/content/docs/5.0/components/tooltips.md | 11 ++++++++++ 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js index c5cb9cad0857..3ffa8c3ea71e 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 68992fe771e6..1ba929180d13 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 e713fe560202..7797f69efcd0 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 = + '' + + '' + + '' + + '' + + '' + + '' + + 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 = '' diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 384be8781873..e896258d9747 100644 --- 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: {{< /highlight >}} +With an SVG: + +
+ + + + + + +
+ ## Usage The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. From 513e8bc47acfddf9745820197ee05d9ca3ecc2cc Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 17 Jun 2020 21:53:02 +0300 Subject: [PATCH 2/3] Update tooltips.md --- site/content/docs/5.0/components/tooltips.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index e896258d9747..19d95e0281d7 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -85,9 +85,9 @@ With an SVG:
- - - + + +
From 4b503328824e68d16cc8c4047586a6cbd4e52ed7 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 17 Jun 2020 21:56:45 +0300 Subject: [PATCH 3/3] Update tooltip.spec.js --- js/tests/unit/tooltip.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 7797f69efcd0..0a98096a405e 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -327,9 +327,9 @@ describe('Tooltip', () => { it('should show a tooltip when hovering a children element', done => { fixtureEl.innerHTML = '' + - '' + - '' + - '' + + '' + + '' + + '' + '' + ''