Tooltip

Show a small floating label when the pointer hovers over an element.

Tooltip wraps its children in a hover target and shows a small animated label next to it, positioned with @floating-ui/react. Use it for short hints such as keyboard shortcuts. By default the tooltip is portalled to document.body.

Import#

typescript

import { Tooltip } from "@reactberry/system/blocks";

Usage#

typescript

import { Tooltip } from "@reactberry/system/blocks";
import { Button, Text } from "@reactberry/system/elements";

export default function SaveAction() {
  return (
    <Tooltip content="Save changes (Cmd+S)" placement="top" arrow>
      <Button variant="primary" $size="small">
        <Text>Save</Text>
      </Button>
    </Tooltip>
  );
}

Examples#

Placement#

placement sets the preferred side. When there is no room, the flip middleware moves the tooltip to the opposite side.

Custom panel#

Use panelProps to restyle the panel, and possiblePlacements to choose the fallback sides.

Trash

API#

Prop	Type	Default	Description
`children*`	`ReactNode`	—	The hover target.
`content*`	`ReactNode`	—	Content shown inside the tooltip panel.
`placement`	`"bottom""top""left""right"`	`"bottom"`	Preferred side.
`offset`	`number`	`4`	Distance in pixels between the target and the tooltip.
`portal`	`boolean`	`true`	Renders the tooltip into `document.body` once mounted.
`possiblePlacements`	`string[]`	—	Fallback sides for the `flip` middleware. Values other than `top`, `bottom`, `left` or `right` are ignored.
`arrow`	`boolean`	`false`	Renders a small rotated square pointing at the target.
`panelProps`	`(FastOmit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, keyof BoxProps> & BoxProps)`	—	Props spread onto the panel, overriding its defaults (`skin="translucent.dark"`, `shape="roundedLarge"`, `p="small"`, `maxWidth="20rem"`).

children (required) is the hover target. Any other props are spread onto both the hover target Box (which defaults to display="flex" and cursor="help") and the outer floating wrapper.

Accessibility#

The tooltip opens on mouseenter and closes on mouseleave only. It does not respond to focus, touch, or the Escape key, so keyboard and touch users cannot open it.
No role or ARIA relationship (such as aria-describedby) is set between the target and the tooltip. Do not put information only in the tooltip.

Notes#

The floating element has pointerEvents: "none" and uses position: fixed, with flip and shift (8px padding) middleware.
Remaining props are spread onto both the target and the floating wrapper, so layout props affect both elements. A style prop replaces the floating wrapper's whole inline style, including its position.
The enter and exit animation slides vertically by 10px, regardless of the resolved side.
TooltipProps is not exported.