Improve tooltip appearance/disappearance timing

[nCastle1]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Currently, Calcite tooltip is quite slow to disappear (and sometimes will just not disappear), but is very quick to appear on hover. This is the opposite of typical browser behavior, where tooltips are slow to appear, but disappear instantly. It is also different from the tooltip behavior of other libraries (e.g. bootstrap) that use floating-ui/poppers-js.

Demo showing delays with Calcite tooltip, and failure to dismiss in some cases:

Screen.Recording.2024-12-17.at.2.17.52.PM.mov

Another issue is that there seems to be a delay between when the mouse event happens and when the tooltip is shown or hidden; but by the time the tooltip appears it is no longer needed. This can look bad when multiple elements with tooltips are shown side-by-side, e.g. in an action bar:

Screen.Recording.2024-12-17.at.2.20.49.PM.mov

Demo of another implementation:

Screen.Recording.2024-12-17.at.2.19.18.PM.mov

Browser built-in tooltip behavior:

Screen.Recording.2024-12-17.at.2.24.11.PM.mov

(tooltip is slow to appear at first, but disappears instantly. If a tooltip has been shown very recently, subsequent tooltips are faster to appear)

Acceptance Criteria

• Tooltips do not start to appear after the mouse has already left the reference element
• Tooltips disappear immediately after the mouse has left the reference element
• Tooltips do not appear when the mouse is not on the reference element

Relevant Info

Behavior appears to be the same for 2.x and 3.x tooltips, so I don't believe the issues are caused by recent Stencil migration work.

Which Component

calcite-tooltip

Example Use Case

I would like to use calcite tooltips for elements in a calcite-action-pad, but performance/behavior was unacceptable, so I had to remove them and rely on built-in browser tooltips.

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[geospatialem]

@nCastle1 Can you help our investigation on the above with a repro case of the current behavior?

[DitwanP]

To repro the case of tooltip not disappearing you have to quickly hover and remove the mouse from the tooltip and then do not move the mouse. ⚡️🛑

Screen.Recording.2024-12-18.at.11.17.26.AM.mov