Tooltip

Playground

Verwende <TooltipTrigger /> und <Tooltip /> in Kombination mit der gewünschten Component, um beim Hovern der Component einen Tooltip anzuzeigen.

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

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

Delay

Tooltips erscheinen verzögert, damit sie beim Hovern über die Oberfläche nicht aufblitzen. Über die delay Property des Triggers wählst du zwischen zwei Verzögerungen.

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.