UI: Tooltip

Ein kurzer Text neben seinem Auslöser, mit TooltipTrigger. Importiere die Token-Datei einmal (@pithyx/ui/tokens.css) und umschließe die App mit UiProvider; siehe @pithyx/ui.

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

Schnittstellen

TooltipProps

The props of Tooltip.

Erweitert

• Omit<AriaTooltipProps, "className">

Eigenschaften

className?

optional className?: string;

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

Variablen

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.

Parameter

Parameter	Typ
props	TooltipTriggerComponentProps

Rückgabewert

Element

Param

props

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

Returns

The trigger with its tooltip.

Funktionen

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.

Parameter

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

Rückgabewert

Element

The tooltip.

Beispiel

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