Tooltip

Import
import { Tooltip } from "reshaped";
import type { TooltipProps } from "reshaped";
Related components

Automatically fits the popover into the viewport or locks it to the position value you provide

Full keyboard navigation
Supports custom trigger element rendering
Supports controlled mode


Usage

Tooltips can be added to any interactive element on the page by passing its attributes and adding the content you want to render.

Position

You can define the position where you want to display the Tooltip. However, if it doesn't fit into the screen, it will automatically pick a better position that stays within the viewport.

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. Instead, a good approach is to wrap your disabled element with Actionable utility rendering it as div. It will help you avoid rendering two nested buttons and automatically apply all accessibility-related attributes.

Accessibility

  • It's essential 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.