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

[macandcheese]

This would be a welcome improvement - I think the proposed changes would solve a lot of the UX problems - here's an example of how it's affecting the Component Sample. It's pretty frustrating to use and appears buggy with how quickly the tooltips are invoked and then disappear.

Screen.Recording.2025-01-29.at.4.03.42.PM.mov

Screen.Recording.2025-01-29.at.4.07.13.PM.mov

I also notice there's a few pixel gap between the invoking element and the rendered Tooltip - where it will dismiss if you try and move your cursor to the tooltip. But hovering over the tooltip persists it - creating a small unintentional window of dismissal - so maybe this gap should be achieved with padding instead of margin or offset placement if that isn't intended?

[driskull]

Tooltips do not start to appear after the mouse has already left the reference element

We should fix this one.

Tooltips disappear immediately after the mouse has left the reference element

We cannot fix this one because we need to give the user time to hover over the tooltip.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role#required_javascript_features

Tooltips do not appear when the mouse is not on the reference element

I think this is probably the same as the first one

[driskull]

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.

I don't think those libraries are following this aria guideline: The tooltip stays open when hovered. Our tooltips are a bit more wordy where users may need to copy text from them or keep them open to read.

[mpayson]

Tooltips do not start to appear after the mouse has already left the reference element

We should fix this one.

Some additional information from my testing for #11573, I think this was working as expected in version 2.10

[driskull]

I think we can proceed with fixing these:

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

This should also fix the issue when moving outside of an iframe because it will close the tooltip after a timeout instead of just with the mouse moving.