From b3ea49c1a0d98282e3fc4047603c6eaac44af6dd Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 19 Feb 2025 15:52:51 -0800 Subject: [PATCH 1/2] fix(tooltip): close tooltip when hovering out of an iframe. #11091 --- .../src/components/tooltip/TooltipManager.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts index c1bb55c5b8f..1db230ee399 100644 --- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts +++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts @@ -96,6 +96,10 @@ export default class TooltipManager { } }; + private pointerLeaveHandler = (): void => { + this.closeHoveredTooltip(); + }; + private pointerMoveHandler = (event: PointerEvent): void => { if (event.defaultPrevented) { this.closeHoveredTooltip(); @@ -210,6 +214,7 @@ export default class TooltipManager { window.addEventListener("click", this.clickHandler); window.addEventListener("focusin", this.focusInHandler); window.addEventListener("blur", this.blurHandler); + document.addEventListener("pointerleave", this.pointerLeaveHandler); } private removeListeners(): void { @@ -218,6 +223,7 @@ export default class TooltipManager { window.removeEventListener("click", this.clickHandler); window.removeEventListener("focusin", this.focusInHandler); window.removeEventListener("blur", this.blurHandler); + document.removeEventListener("pointerleave", this.pointerLeaveHandler); } private clearHoverOpenTimeout(): void { From 2fe21341b84915a1fdde36ac76b4938b5827c28b Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 24 Feb 2025 10:50:05 -0800 Subject: [PATCH 2/2] add demo, cleanup --- .../src/components/tooltip/TooltipManager.ts | 1 + .../src/demos/tooltip-iframe.html | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 packages/calcite-components/src/demos/tooltip-iframe.html diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts index 1db230ee399..d77cd139d1d 100644 --- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts +++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts @@ -97,6 +97,7 @@ export default class TooltipManager { }; private pointerLeaveHandler = (): void => { + this.clearHoverTimeout(); this.closeHoveredTooltip(); }; diff --git a/packages/calcite-components/src/demos/tooltip-iframe.html b/packages/calcite-components/src/demos/tooltip-iframe.html new file mode 100644 index 00000000000..99b602b4f7e --- /dev/null +++ b/packages/calcite-components/src/demos/tooltip-iframe.html @@ -0,0 +1,19 @@ + + + + + + + Tooltips within iframe + + + + + + +