fix(tooltip): do not open after the pointer has moved off of the reference element (#11599)

**Related Issue:** #11091

## Summary

- No longer opens the tooltip after the pointer has moved off of the
reference element
- Clears open timeout when pointer moved and the same tooltip's
reference element is no longer hovered
- If opening and the hover tooltip doesn't match the tooltip being
opened, nothing happens.
- Modify delay opening tooltips when a tooltip is already open from
`0ms` to `100ms` which is a third the usual time.
- Modify delay closing tooltips from `500ms` to `450ms` which is a
factor of `1.5` times the opening delay.

Author: driskull

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,15 +274,15 @@ 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;
         }
 
         this.clearHoverCloseTimeout();
         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,
     );
   };
 

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";

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);
   });