Skip to content

refactor(frontend): hover tooltips on react-aria-components - #4000

Draft
Kadrian wants to merge 1 commit into
refactor/info-panefrom
refactor/tooltip-react-aria
Draft

refactor(frontend): hover tooltips on react-aria-components#4000
Kadrian wants to merge 1 commit into
refactor/info-panefrom
refactor/tooltip-react-aria

Conversation

@Kadrian

@Kadrian Kadrian commented Sep 2, 2026

Copy link
Copy Markdown
Collaborator

Design-system prep, step 2: hover tooltips on react-aria-components

Stacked on #3999. WithTooltip (tippy) is replaced by ui-components/Tooltip built on react-aria-components, using its composition shape so the call sites don't change again when more components move to react-aria:

<TooltipTrigger>
  <IconButton  />
  <Tooltip>{t("common.delete")}</Tooltip>
</TooltipTrigger>

Main change

  • react-aria-components and react-aria added; tippy stays only for the three click popovers (HelpMenu, DownloadResultsDropdownButton, ConfirmableTooltip), which move to a Popover in the next step
  • BasicButton reads the trigger props through useFocusable, so every existing button is a tooltip trigger on its own, without wrappers, and stays one when it becomes a react-aria Button
  • TooltipTarget marks non-button content (icons, node labels, dropzones) as the trigger; static content keeps excludeFromTabOrder so the tab order is unchanged, help icons become keyboard reachable
  • Tooltip renders nothing without content, so optional texts work as before; wide and placement kept, lazy became delay={1500}
  • look kept: white box, shadow, arrow, 100 ms fade (--animate-fade-in/out)
  • storybook now loads index.css, first Tooltip stories

Worth a closer look

  • tooltips open after 500 ms on first hover and immediately for neighbouring triggers (react-aria's warm-up), and don't open on disabled buttons or on touch
  • className on the old WithTooltip styled tippy's box, not the trigger, so those classes were dropped; the whitespace-nowrap one moved onto the Tooltip

Next steps

  • Popover for the three click uses, remove tippy
  • Button and Icon consolidation in ui-components

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.

1 participant