Tooltip
Tooltips display additional text information when hovering over or focusing on an element.

If you need to display rich content triggered by the user, you may consider using Popover or Modal.

Usage

Tooltips can be added to any interactive element in the page by simply wrapping that element and passing the attributes. Note that attributes are passed by the component itself they get destructured in the children function ({ attributes }).

You can define the position you want the Tooltip to be displayed with. However, if it doesn't fit into the screen, it will automatically pick a position that fits better.

Since Arcade components are built to work with RTL, left and right directions are called start and end instead. This includes the values of the position property as you may see in the previous example.

All Arcade components are relying on the theme tokens for styling. However, having a dark background in your light theme means that you have to support all the color that can be used on top of it. This would basically result in storing all light and dark theme values in each of its modes.

To avoid this, we're applying inverted mode to the Tooltip content internally. This means that while your app is using light mode, Tooltip will be displayed using dark mode values and vice versa, preserving all the accessibility requirements.

Accessibility

It's important to pass the attributes provided by the Tooltip component to your interactive trigger component. That way you will ensure that all the user events and aria attributes are assigned correctly.

Properties

NameTypeDefaultRequiredComment
idstring-falseCustom id override
positiontop, top-start, top-end, bottom, bottom-start, bottom-end, start, end-false
onOpen() => {}-false
onClose() => {}-false
childrenReactNode-false
textReactNode-false