Tooltip

Tooltips zeigen beim Hovern kurze Zusatzinformationen zu einem Element.

import {
  Button,
  IconEdit,
  Tooltip,
  TooltipTrigger,
} from "@mittwald/flow-react-components";

<TooltipTrigger>
  <Button aria-label="Bearbeiten" variant="plain">
    <IconEdit />
  </Button>
  <Tooltip>Bearbeiten</Tooltip>
</TooltipTrigger>

Best Practices

Halte den Inhalt kurz und präzise, meist ein bis drei Wörter.
Nutze den Tooltip nur für ergänzende Informationen. Wichtige Inhalte wie Fehlermeldungen oder Feedback gehören nicht hinein, da er zum Beispiel auf dem Smartphone unbemerkt bleibt.
Verwende im Tooltip nur Text, keine interaktiven Inhalte wie Buttons‍ oder Links‍.
Lass den Tooltip die sichtbare Beschriftung ergänzen, nicht wiederholen.

Delay

Tooltips erscheinen verzögert, damit sie beim Hovern über die Oberfläche nicht aufblitzen. Über die delay Property des Triggers stehen zwei Verzögerungen zur Auswahl.

Default (400 ms) – Verwende ihn, wenn das Element ohne den Tooltip nicht verständlich ist – z. B. ein Button, der nur aus einem Icon besteht.
Long (1500 ms) – Verwende ihn für ergänzende Informationen an Elementen, die bereits beschriftet sind. Die längere Verzögerung verhindert, dass der Tooltip ungewollt ablenkt.

Properties

Property	Type	Description
`UNSTABLE_portalContainer`	Elementdefault: document.body	The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
`arrowBoundaryOffset`	numberdefault: 0	The minimum distance the arrow's edge should be from the edge of the overlay element.
`children`	ReactNode
`className`	ClassNameOrFunction<TooltipRenderProps>default: 'react-aria-Tooltip'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`containerPadding`	numberdefault: 12	The placement padding that should be applied between the element and its surrounding container.
`crossOffset`	numberdefault: 0	The additional offset applied along the cross axis between the element and its anchor element.
`defaultOpen`	boolean	Whether the overlay is open by default (uncontrolled).
`dir`	string
`hidden`	boolean
`inert`	boolean
`isEntering`	boolean	Whether the tooltip is currently performing an entry animation.
`isExiting`	boolean	Whether the tooltip is currently performing an exit animation.
`isOpen`	boolean	Whether the element is rendered.
`lang`	string
`offset`	numberdefault: 0	The additional offset applied along the main axis between the element and its anchor element.
`placement`	bottom \| bottom left \| bottom right \| bottom start \| bottom end \| top (default) \| top left \| top right \| top start \| top end \| left \| left top \| left bottom \| start \| start top \| start bottom \| right \| right top \| right bottom \| end \| end top \| end bottom	The placement of the tooltip with respect to the trigger.
`render`	DOMRenderFunction<"div", TooltipRenderProps>	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`shouldFlip`	booleandefault: true	Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
`style`	StyleOrFunction<TooltipRenderProps>	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	yes \| no
`triggerRef`	RefObject<Element \| null>	The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone.

Events

Property	Type	Description
`onClick`	MouseEventHandler<HTMLDivElement>
`onOpenChange`	((isOpen: boolean) => void)	Handler that is called when the overlay's open state changes.

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components