From ef83c24ce7ca4a3dbb42b57b77dfc9fcfb3cd3d5 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 19 Feb 2025 16:49:16 -0800 Subject: [PATCH 1/5] fix(tooltip): do open after the mouse has already left the reference element. #11091 --- .../src/components/tooltip/TooltipManager.ts | 14 +++++++++++--- .../src/components/tooltip/resources.ts | 1 + 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts index c1bb55c5b8f..fa9edeca4a0 100644 --- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts +++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { getShadowRootNode } from "../../utils/dom"; import { ReferenceElement } from "../../utils/floating-ui"; -import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "./resources"; +import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_QUICK_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "./resources"; import { getEffectiveReferenceElement } from "./utils"; import type { Tooltip } from "./tooltip"; @@ -26,6 +26,8 @@ export default class TooltipManager { private clickedTooltip: Tooltip["el"] = null; + private hoveredTooltip: Tooltip["el"] = null; + // -------------------------------------------------------------------------- // // Public Methods @@ -116,6 +118,12 @@ export default class TooltipManager { return; } + if (tooltip !== this.hoveredTooltip) { + this.clearHoverOpenTimeout(); + } + + this.hoveredTooltip = tooltip; + if (tooltip) { this.openHoveredTooltip(tooltip); } else if (activeTooltip?.open) { @@ -266,7 +274,7 @@ export default class TooltipManager { private openHoveredTooltip = (tooltip: Tooltip["el"]): void => { this.hoverOpenTimeout = window.setTimeout( () => { - if (this.hoverOpenTimeout === null) { + if (this.hoverOpenTimeout === null || tooltip !== this.hoveredTooltip) { return; } @@ -274,7 +282,7 @@ export default class TooltipManager { this.closeTooltipIfNotActive(tooltip); this.toggleTooltip(tooltip, true); }, - this.activeTooltip?.open ? 0 : TOOLTIP_OPEN_DELAY_MS, + this.activeTooltip?.open ? TOOLTIP_QUICK_OPEN_DELAY_MS : TOOLTIP_OPEN_DELAY_MS, ); }; diff --git a/packages/calcite-components/src/components/tooltip/resources.ts b/packages/calcite-components/src/components/tooltip/resources.ts index b7d0071e0e8..4f96ccc42b1 100644 --- a/packages/calcite-components/src/components/tooltip/resources.ts +++ b/packages/calcite-components/src/components/tooltip/resources.ts @@ -4,6 +4,7 @@ export const CSS = { }; export const TOOLTIP_OPEN_DELAY_MS = 300; +export const TOOLTIP_QUICK_OPEN_DELAY_MS = 25; export const TOOLTIP_CLOSE_DELAY_MS = 500; export const ARIA_DESCRIBED_BY = "aria-describedby"; From a6c99c6942a43110321b0aeea430cc1b621bc337 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 20 Feb 2025 09:32:18 -0800 Subject: [PATCH 2/5] bump quick delay --- packages/calcite-components/src/components/tooltip/resources.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tooltip/resources.ts b/packages/calcite-components/src/components/tooltip/resources.ts index 4f96ccc42b1..32c6a98ddc9 100644 --- a/packages/calcite-components/src/components/tooltip/resources.ts +++ b/packages/calcite-components/src/components/tooltip/resources.ts @@ -4,7 +4,7 @@ export const CSS = { }; export const TOOLTIP_OPEN_DELAY_MS = 300; -export const TOOLTIP_QUICK_OPEN_DELAY_MS = 25; +export const TOOLTIP_QUICK_OPEN_DELAY_MS = TOOLTIP_OPEN_DELAY_MS / 2; export const TOOLTIP_CLOSE_DELAY_MS = 500; export const ARIA_DESCRIBED_BY = "aria-describedby"; From 2c9260b3b8279576fe642051026d968a77fa9240 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 20 Feb 2025 09:34:20 -0800 Subject: [PATCH 3/5] slightly modify close delay --- packages/calcite-components/src/components/tooltip/resources.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tooltip/resources.ts b/packages/calcite-components/src/components/tooltip/resources.ts index 32c6a98ddc9..819c054dfbf 100644 --- a/packages/calcite-components/src/components/tooltip/resources.ts +++ b/packages/calcite-components/src/components/tooltip/resources.ts @@ -5,6 +5,6 @@ export const CSS = { export const TOOLTIP_OPEN_DELAY_MS = 300; export const TOOLTIP_QUICK_OPEN_DELAY_MS = TOOLTIP_OPEN_DELAY_MS / 2; -export const TOOLTIP_CLOSE_DELAY_MS = 500; +export const TOOLTIP_CLOSE_DELAY_MS = TOOLTIP_OPEN_DELAY_MS * 1.5; export const ARIA_DESCRIBED_BY = "aria-describedby"; From efa70451627df5f38a9dee7532e4a92d13a82c73 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 20 Feb 2025 10:39:45 -0800 Subject: [PATCH 4/5] fix test --- .../src/components/tooltip/tooltip.e2e.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts index 30912079e10..b121f77b89a 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts @@ -5,7 +5,7 @@ import { accessible, defaults, floatingUIOwner, hidden, openClose, renders, them import { html } from "../../../support/formatting"; import { getElementXY, GlobalTestProps, skipAnimations } from "../../tests/utils"; import { FloatingCSS } from "../../utils/floating-ui"; -import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS, CSS } from "./resources"; +import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS, CSS, TOOLTIP_QUICK_OPEN_DELAY_MS } from "./resources"; import type { Tooltip } from "./tooltip"; interface PointerMoveOptions { @@ -1236,7 +1236,7 @@ describe("calcite-tooltip", () => { }); }); - it("should open tooltip instantly if another tooltip is already visible", async () => { + it("should open tooltip faster if another tooltip is already visible", async () => { const page = await newE2EPage(); await page.setContent( @@ -1260,7 +1260,7 @@ describe("calcite-tooltip", () => { expect(await tooltip2.getProperty("open")).toBe(false); await dispatchPointerEvent(page, "#ref2"); - await page.waitForTimeout(0); + await page.waitForTimeout(TOOLTIP_QUICK_OPEN_DELAY_MS); expect(await tooltip1.getProperty("open")).toBe(false); expect(await tooltip2.getProperty("open")).toBe(true); }); From fe2340b6b5abb6626b7c47440e89a0f03ee30170 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 20 Feb 2025 13:29:14 -0800 Subject: [PATCH 5/5] cleanup --- packages/calcite-components/src/components/tooltip/resources.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tooltip/resources.ts b/packages/calcite-components/src/components/tooltip/resources.ts index 819c054dfbf..6b07af326db 100644 --- a/packages/calcite-components/src/components/tooltip/resources.ts +++ b/packages/calcite-components/src/components/tooltip/resources.ts @@ -4,7 +4,7 @@ export const CSS = { }; export const TOOLTIP_OPEN_DELAY_MS = 300; -export const TOOLTIP_QUICK_OPEN_DELAY_MS = TOOLTIP_OPEN_DELAY_MS / 2; +export const TOOLTIP_QUICK_OPEN_DELAY_MS = TOOLTIP_OPEN_DELAY_MS / 3; export const TOOLTIP_CLOSE_DELAY_MS = TOOLTIP_OPEN_DELAY_MS * 1.5; export const ARIA_DESCRIBED_BY = "aria-describedby";