# Tooltip

Tooltips zeigen beim Hovern kurze Zusatzinformationen zu einem Element.

```tsx
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](https://flow.mittwald.de/04-components/actions/button) oder
  [Links](https://flow.mittwald.de/04-components/navigation/link).
- 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.

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

<>
  <TooltipTrigger>
    <Button aria-label="Bearbeiten" variant="plain">
      <IconEdit />
    </Button>
    <Tooltip>Bearbeiten</Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay="long">
    <Button variant="plain">Bearbeiten</Button>
    <Tooltip>Name und Beschreibung ändern</Tooltip>
  </TooltipTrigger>
</>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `UNSTABLE_portalContainer` _(deprecated)_ | `Element` | `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` | `number` | `0` | The minimum distance the arrow's edge should be from the edge of the overlay element. |
| `children` | `ReactNode` | - | - |
| `className` | `ClassNameOrFunction<TooltipRenderProps>` | `'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` | `number` | `12` | The placement padding that should be applied between the element and its surrounding container. |
| `crossOffset` | `number` | `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` | `number` | `0` | The additional offset applied along the main axis between the element and its anchor element. |
| `placement` | `Placement` | `'top'` | 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` | `boolean` | `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>` | - | 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 | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onOpenChange` | `((isOpen: boolean) => void)` | - | Handler that is called when the overlay's open state changes. |

### Accessibility

| Property | Type | Default | 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. |