UI: Tooltip

A short text next to its trigger, with TooltipTrigger. Import the token file once (@pithyx/ui/tokens.css) and wrap the app in UiProvider; see @pithyx/ui.

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

Interfaces

TooltipProps

The props of Tooltip.

Extends

• Omit<AriaTooltipProps, "className">

Properties

className?

optional className?: string;

Extra class names, added after the tooltip’s own.

Variables

TooltipTrigger

const TooltipTrigger: (props) => Element = AriaTooltipTrigger;

Shows a Tooltip for its first child on hover and keyboard focus. It is React Aria’s TooltipTrigger; its props (delay, closeDelay, isDisabled) are documented there.

TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to the trigger.

Parameters

Parameter	Type
props	TooltipTriggerComponentProps

Returns

Element

Param

props

React Aria’s tooltip trigger props, the trigger and the tooltip.

Returns

The trigger with its tooltip.

Functions

Tooltip()

function Tooltip(props): Element;

A short text next to its trigger; wrap both in a TooltipTrigger. A tooltip shows on hover and keyboard focus, never on touch, so it must not carry anything the user needs.

Parameters

Parameter	Type	Description
props	TooltipProps	React Aria’s tooltip props (placement, offset) and the text.

Returns

Element

The tooltip.

Example

<TooltipTrigger>
  <Button>Sync</Button>
  <Tooltip>Last synced 5 minutes ago</Tooltip>
</TooltipTrigger>