Skip to content

fix: improve tooltip ux with delay and better placement (#775)#776

Merged
NoopDog merged 1 commit intomainfrom
fran/775-filter-tooltip
Feb 18, 2026
Merged

fix: improve tooltip ux with delay and better placement (#775)#776
NoopDog merged 1 commit intomainfrom
fran/775-filter-tooltip

Conversation

@frano-m
Copy link
Contributor

@frano-m frano-m commented Feb 18, 2026

Closes #775.

This pull request enhances the annotation and tooltip functionality for filter labels and tab labels in the UI. It introduces annotation metadata to several filter constants and improves the user experience by adding tooltip delays and consistent placement.

Enhancements to filter and tab annotations:

  • Added annotation objects with descriptive metadata (label and description) to filter category constants (BIOLOGICAL_SEX, GENUS_SPECIES, DONOR_COUNT, FILE_FORMAT, FILE_TYPE) to provide additional context for users. [1] [2] [3] [4] [5]
  • Updated the FilterLabel and tab label components to pass the annotation prop to Tooltip, and configured tooltips with a 300ms enter delay and consistent placement for improved usability. [1] [2]

Storybook and testing improvements:

  • Modified the filter label Storybook story to include an annotation object, enabling testing and demonstration of the new annotation functionality. [1] [2]
image

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This pull request improves the tooltip user experience for filter labels and tab labels by adding hover delays and optimizing tooltip placement. The changes address issue #775, which identified that facet tooltips were appearing instantly and covering the options users were trying to interact with.

Changes:

  • Added 300ms enterDelay to tooltips on filter labels and tab labels to prevent tooltips from appearing immediately on hover
  • Added placement="right" to filter label tooltips to prevent them from covering sidebar facet options
  • Enhanced filter constants with annotation metadata (label and description) for better user context
  • Fixed inconsistent key naming in the DONOR_COUNT constant from "Donor Count" to "donorCount" to match camelCase convention

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
src/components/common/Tabs/tabs.tsx Added 300ms tooltip delay to tab labels
src/components/Filter/components/Filters/stories/constants.ts Added annotation metadata to filter constants and fixed DONOR_COUNT key to use camelCase
src/components/Filter/components/FilterLabel/filterLabel.tsx Added 300ms tooltip delay and right-side placement to filter labels
src/components/Filter/components/FilterLabel/filterLabel.stories.tsx Added annotation example to Storybook story for testing

@NoopDog NoopDog merged commit 2d60b92 into main Feb 18, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve facet tooltip UX with delay and better placement

3 participants