Skip to content

chore: added story to demonstrate a delayed tooltip example #5384

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Rajdeepc
Copy link
Contributor

@Rajdeepc Rajdeepc commented Apr 21, 2025

Description

This PR adds a new story to the Tooltip component documentation that demonstrates how to properly handle interactions between delayed tooltips and other overlays.

Related issue(s)

Motivation and context

When a delayed tooltip appears while another overlay (like a popover or menu) is already open, the default DOM event bubbling can cause the existing overlay to close prematurely during the tooltip's warmup phase. This results in a poor user experience where:

  1. Users see flickering UI elements
  2. Overlays disappear before replacement content is visible
  3. The interaction feels disjointed and abrupt

How has this been tested?

  • Test case 1

    1. Go here
    2. Follow the instruction on the story
  • Did it pass in Desktop?

  • Did it pass in Mobile?

  • Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@Rajdeepc Rajdeepc requested a review from a team as a code owner April 21, 2025 11:15
@Rajdeepc Rajdeepc self-assigned this Apr 21, 2025
Copy link

changeset-bot bot commented Apr 21, 2025

🦋 Changeset detected

Latest commit: 29732fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages
Name Type
@spectrum-web-components/tooltip Patch
@spectrum-web-components/picker Patch
@spectrum-web-components/bundle Patch
@spectrum-web-components/truncated Patch
@spectrum-web-components/action-menu Patch
@spectrum-web-components/custom-vars-viewer Patch
example-project-rollup Patch
example-project-webpack Patch
@spectrum-web-components/story-decorator Patch
documentation Patch
@spectrum-web-components/breadcrumbs Patch
@spectrum-web-components/eslint-plugin Patch
@spectrum-web-components/accordion Patch
@spectrum-web-components/action-bar Patch
@spectrum-web-components/action-button Patch
@spectrum-web-components/action-group Patch
@spectrum-web-components/alert-banner Patch
@spectrum-web-components/alert-dialog Patch
@spectrum-web-components/asset Patch
@spectrum-web-components/avatar Patch
@spectrum-web-components/badge Patch
@spectrum-web-components/button-group Patch
@spectrum-web-components/button Patch
@spectrum-web-components/card Patch
@spectrum-web-components/checkbox Patch
@spectrum-web-components/clear-button Patch
@spectrum-web-components/close-button Patch
@spectrum-web-components/coachmark Patch
@spectrum-web-components/color-area Patch
@spectrum-web-components/color-field Patch
@spectrum-web-components/color-handle Patch
@spectrum-web-components/color-loupe Patch
@spectrum-web-components/color-slider Patch
@spectrum-web-components/color-wheel Patch
@spectrum-web-components/combobox Patch
@spectrum-web-components/contextual-help Patch
@spectrum-web-components/dialog Patch
@spectrum-web-components/divider Patch
@spectrum-web-components/dropzone Patch
@spectrum-web-components/field-group Patch
@spectrum-web-components/field-label Patch
@spectrum-web-components/help-text Patch
@spectrum-web-components/icon Patch
@spectrum-web-components/icons-ui Patch
@spectrum-web-components/icons-workflow Patch
@spectrum-web-components/icons Patch
@spectrum-web-components/iconset Patch
@spectrum-web-components/illustrated-message Patch
@spectrum-web-components/infield-button Patch
@spectrum-web-components/link Patch
@spectrum-web-components/menu Patch
@spectrum-web-components/meter Patch
@spectrum-web-components/modal Patch
@spectrum-web-components/number-field Patch
@spectrum-web-components/overlay Patch
@spectrum-web-components/picker-button Patch
@spectrum-web-components/popover Patch
@spectrum-web-components/progress-bar Patch
@spectrum-web-components/progress-circle Patch
@spectrum-web-components/radio Patch
@spectrum-web-components/search Patch
@spectrum-web-components/sidenav Patch
@spectrum-web-components/slider Patch
@spectrum-web-components/split-view Patch
@spectrum-web-components/status-light Patch
@spectrum-web-components/swatch Patch
@spectrum-web-components/switch Patch
@spectrum-web-components/table Patch
@spectrum-web-components/tabs Patch
@spectrum-web-components/tags Patch
@spectrum-web-components/textfield Patch
@spectrum-web-components/thumbnail Patch
@spectrum-web-components/toast Patch
@spectrum-web-components/top-nav Patch
@spectrum-web-components/tray Patch
@spectrum-web-components/underlay Patch
@spectrum-web-components/vrt-compare Patch
@spectrum-web-components/base Patch
@spectrum-web-components/grid Patch
@spectrum-web-components/opacity-checkerboard Patch
@spectrum-web-components/reactive-controllers Patch
@spectrum-web-components/shared Patch
@spectrum-web-components/styles Patch
@spectrum-web-components/theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Copy link

github-actions bot commented Apr 21, 2025

Tachometer results

Chrome

tooltip permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 675 kB 34.57ms - 35.36ms - faster ✔
5% - 9%
1.97ms - 3.46ms
branch 643 kB 37.06ms - 38.31ms slower ❌
6% - 10%
1.97ms - 3.46ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 635 kB 24.21ms - 25.03ms - faster ✔
7% - 11%
1.87ms - 3.07ms
branch 604 kB 26.65ms - 27.53ms slower ❌
7% - 13%
1.87ms - 3.07ms
-

test-element permalink

Version Bytes Avg Time vs remote vs branch
npm latest 759 kB 52.26ms - 54.01ms - faster ✔
1% - 4%
0.39ms - 2.45ms
branch 724 kB 54.01ms - 55.10ms slower ❌
1% - 5%
0.39ms - 2.45ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 735 kB 42.14ms - 43.47ms - faster ✔
5% - 8%
2.09ms - 3.80ms
branch 700 kB 45.22ms - 46.28ms slower ❌
5% - 9%
2.09ms - 3.80ms
-
Firefox

tooltip permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 759 kB 78.03ms - 81.65ms - slower ❌
3% - 10%
2.22ms - 7.70ms
branch 724 kB 72.82ms - 76.94ms faster ✔
3% - 10%
2.22ms - 7.70ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 635 kB 47.35ms - 49.97ms - faster ✔
8% - 18%
4.24ms - 10.20ms
branch 604 kB 53.21ms - 58.55ms slower ❌
9% - 21%
4.24ms - 10.20ms
-

test-element permalink

Version Bytes Avg Time vs remote vs branch
npm latest 759 kB 118.60ms - 125.72ms - unsure 🔍
-5% - +2%
-6.10ms - +2.06ms
branch 724 kB 122.19ms - 126.17ms unsure 🔍
-2% - +5%
-2.06ms - +6.10ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 735 kB 90.09ms - 92.95ms - faster ✔
7% - 11%
6.48ms - 11.44ms
branch 700 kB 98.46ms - 102.50ms slower ❌
7% - 13%
6.48ms - 11.44ms
-

Copy link
Contributor

@blunteshwar blunteshwar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update the image has so that all tests pass.

@blunteshwar
Copy link
Contributor

Can you add a changeset for the tooltip package

Copy link
Contributor

@TarunAdobe TarunAdobe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@Rajdeepc Rajdeepc requested a review from blunteshwar April 21, 2025 12:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: An open sp-overlay immediately closes when hovering on a delayed sp-tooltip
3 participants