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.

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.

Disabled elements

When rendering disabled elements on the page, they will ignore all events, which will prevent Tooltip from appearing if you use it directly for that element. A good approach to use instead is to wrap your disabled element with Actionable utility rendering it as div. This will help you avoid rendering 2 nested buttons and automatically apply all accessibility related attributes.

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