# UI: Tooltip

> Ein kurzer Text neben seinem Auslöser, mit TooltipTrigger.

Source: https://pithyx.org/de/docs/reference/sdk/ui/tooltip/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/tooltip.md

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](https://pithyx.org/de/docs/sdk/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](#tooltip).

#### Erweitert

- `Omit`\<`AriaTooltipProps`, `"className"`\>

#### Eigenschaften

##### className?

```ts
optional className?: string;
```

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

## Variablen

### TooltipTrigger

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

Shows a [Tooltip](#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()

```ts
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`](#tooltipprops) | React Aria's tooltip props (`placement`, `offset`) and the text. |

#### Rückgabewert

`Element`

The tooltip.

#### Beispiel

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