Tooltip Component

The tooltip component is a simple component that can either have a single paragraph of text or a title and paragraph.

Interactions

When hovering on a Tooltip Trigger, the tooltip will fade in towards the trigger. For example, if the tooltip is situated above the Trigger, hovering on the trigger will cause the tooltip to fade from 0% opacity to 100% opacity, and transition downwards, towards the trigger.

Abstract link

https://share.goabstract.com/b8bdd9f7-b588-4a3f-9c09-a3fa996963aa?sha=88831705e7ef8db1cb8119e01d2bcabfdc03bd24

from design-system.

These probably don't affect sign-off, but:

• Will it ever be a different colour (or only if we do dark mode)?
• Will it ever contain more than plain text (a link for example). If not, I'd guess it would be useful in the docs to suggest what component should be used to provide richer text.

from design-system.

@xdobtqletrmn

• I've kept them dark as this is generally the accepted look for tooltips as the contrast between our light mode and the tooltip helps to make it stand out
• Tooltips should only be used to add additional info that is in plain text - they can't be hovered on themselves as only the (i) icon has the hover target. The Popover component is planned to allow extra features including links and images, so when we have that we'll navigate users to that component in the docs.

from design-system.

tooltip vs popover 🤦‍♂ 😄

from design-system.