diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts
index c1bb55c5b8f..d77cd139d1d 100644
--- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts
+++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts
@@ -96,6 +96,11 @@ export default class TooltipManager {
}
};
+ private pointerLeaveHandler = (): void => {
+ this.clearHoverTimeout();
+ this.closeHoveredTooltip();
+ };
+
private pointerMoveHandler = (event: PointerEvent): void => {
if (event.defaultPrevented) {
this.closeHoveredTooltip();
@@ -210,6 +215,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 +224,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 {
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
+
+
+
+
+
+
+