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..6b07af326db 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_CLOSE_DELAY_MS = 500; +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"; 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); });