Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Epic: Tooltip - Improve component timing #6396

Closed
4 tasks done
geospatialem opened this issue Jan 31, 2023 · 19 comments
Closed
4 tasks done

Epic: Tooltip - Improve component timing #6396

geospatialem opened this issue Jan 31, 2023 · 19 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Online Issues logged by ArcGIS Online team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. design Issues that need design consultation prior to development. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 2 Small fix or update, may require updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.

Comments

@geospatialem
Copy link
Member

geospatialem commented Jan 31, 2023

Actual Behavior

tooltip lags to open or close, where a delay is evident when hovering on/off the reference element. 🐒

Expected Behavior

A more speedy response when interacting with the tooltip 🐎 🏎️

Should allow devs to turn off the response, if they wish to do so.

  • Moving the mouse over the action, it takes too long for the tooltip to show up
  • Moving the mouse to another action, it takes too long for the tooltip still on the other action to disappear and for the new tooltip to display
  • When clicking on an action, the tooltip still shows

Related issues

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/tooltip/

Reproduction Steps

  1. Open the component sample
  2. Hover over the reference element
  3. Wait
  4. Observe the tooltip is displayed after a lag
  5. Hover off the reference element
  6. Wait
  7. Observe the tooltip disappears after a lag

Reproduction Version

1.0.3

Relevant Info

Related to discussions from #6393

Regression?

No response

Impact

Moderate

Esri team

ArcGIS Online

@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 31, 2023
@github-actions github-actions bot added the ArcGIS Online Issues logged by ArcGIS Online team members. label Jan 31, 2023
@tannerjt
Copy link

tannerjt commented Feb 6, 2023

We've noticed this as well. Specifically, when using referenceElement on Safari v16.3, the lag is about 2x longer than on Chrome v109.0.5414.87.

@jcfranco
Copy link
Member

@tannerjt What you're experiencing is a side effect from a polyfill we use to position floating-ui elements in non-Chromium browsers. #5542 has more info and also a workaround if you need to disable it (disabling will lead to incorrect positioning in some cases).

@driskull
Copy link
Member

When clicking on an action, the tooltip still shows

The tooltip has a property closeOnClick which is false by default. We could change this if necessary.

According to w3c...

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.

https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
https://www.digitala11y.com/tooltip-role/

Some docs say 1-5 seconds. Currently, I think its at a half second (500ms). I don't know if we should shorten more than that.

@brittneytewks brittneytewks added estimate - 2 Small fix or update, may require updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library research Issues that require more in-depth research or multiple team members to resolve or make decision. labels Apr 11, 2023
@brittneytewks brittneytewks added design Issues that need design consultation prior to development. and removed needs triage Planning workflow - pending design/dev review. labels Apr 11, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. needs triage Planning workflow - pending design/dev review. and removed design Issues that need design consultation prior to development. 0 - new New issues that need assignment. labels Apr 11, 2023
@geospatialem
Copy link
Member Author

Design research is needed to determine timing, and if users can modify the timing.

@geospatialem geospatialem changed the title [Tooltip] Improve component timing Epic: Tooltip - Improve component timing Apr 17, 2023
@geospatialem geospatialem added the epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. label Apr 17, 2023
@driskull
Copy link
Member

@geospatialem any idea when we'll have the timing decided?

@ashetland
Copy link
Contributor

ashetland commented Jun 8, 2023

At the very least, shortening the open delay will help things feel more snappy across the board.

@driskull
Copy link
Member

driskull commented Jun 8, 2023

I don't think we can do different things for tooltips used by specific components. We don't know what is triggering the tooltip.

The tooltip is already setup so that only one can be visible at a time.

@ashetland
Copy link
Contributor

Gotcha. Sounds like just an improvement to the delay then, 300/500ms?

@driskull
Copy link
Member

driskull commented Jun 8, 2023

Gotcha. Sounds like just an improvement to the delay then, 300/500ms?

Yeah we can do that.

When multiple Tooltips are adjacent to each other, subsequent Tooltips appear instantly and without animation

The problem with this is that we have no way of knowing adjacency. What we do know is if a tooltip is already open. So we could say if a tooltip is already open and a different tooltip is hovered then open immediately.

Tooltips appear instantly and without animation

Tooltip animation is triggered by being set open. So if we need to disable that animation in certain cases we would need to think of a way to do that.

@ashetland ashetland added ready for dev Issues ready for development implementation. and removed design Issues that need design consultation prior to development. labels Jun 8, 2023
@ashetland ashetland added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 8, 2023
@ashetland ashetland removed their assignment Jun 8, 2023
@geospatialem geospatialem added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 8, 2023
@driskull driskull self-assigned this Jun 13, 2023
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jun 13, 2023
@driskull driskull added this to the 2023 June patch priorities milestone Jun 13, 2023
driskull added a commit that referenced this issue Jun 15, 2023
**Related Issue:** #6396

## Summary

- Separates timeout delay between open and close.
  - `open` is set to `300ms`.
  - `close` is set to `500ms`.
- Sets delay to `0ms` if a tooltip is already displayed.
- Add story for design review.
- Update tests.
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Jun 15, 2023
@github-actions github-actions bot assigned geospatialem and unassigned driskull Jun 15, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. 3 - installed Issues that have been merged to master branch and are ready for final confirmation. research Issues that require more in-depth research or multiple team members to resolve or make decision. labels Jun 22, 2023
@geospatialem
Copy link
Member Author

Verified mouse enter and leave speeds from #6396 (comment) in 1.5.0-next.4

@brittneytewks brittneytewks added the design Issues that need design consultation prior to development. label Dec 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Online Issues logged by ArcGIS Online team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. design Issues that need design consultation prior to development. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 2 Small fix or update, may require updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Development

No branches or pull requests

7 participants