search

sumup-oss / circuit-ui

SumUp's design system for the web
https://circuit.sumup.com
Apache License 2.0
917 stars 130 forks source link

Reimplement the Tooltip component using Floating UI #1676

Closed robinmetral closed 6 months ago

robinmetral commented 2 years ago

Component to amend

Tooltip

Visual

The component will look similar to the current Tooltip component. Visuals should remain the same unless otherwise noted (including default placements, etc).

Name Screenshot Details
Overview n/a
Padding Horizontal padding of 12px, vertical padding of 8px
Arrow dimensions 16px (main axis) by 8px (cross axis) arrow, 12px from the edge of the Tooltip

Context

There are two main objectives to this update:

Release

The component should be released in a 5.x version of Circuit UI. The current Tooltip is used in a significant number of components, so having a way to use the new Tooltip as an "opt in" feature

The current version of the Tooltip should be deprecated.

In v6, the legacy Tooltip should be deleted and replaced by the new Tooltip (see #1677).

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Add a comment explaining why the issue is still relevant to prevent it from being closed.

connor-baer commented 1 year ago

https://sarahmhigley.com/writing/tooltips-in-wcag-21/

robinmetral commented 1 year ago

Not stale. About this point:

  • make the Tooltip accessible (🚧 more info)

I'd basically draw inspiration from the following sources:

And if we want to look more into web components, we can draw inspiration from Scott O'Hara's tooltip component

robinmetral commented 1 year ago

@connor-baer you beat me to it 😉

connor-baer commented 6 months ago

The experimental Tooltip and Toggletip components are available in @sumup/circuit-ui@8.6.0.