# UI: Tooltip

> A short text next to its trigger, with TooltipTrigger.

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

A short text next to its trigger, with TooltipTrigger. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### TooltipProps

The props of [Tooltip](#tooltip).

#### Extends

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

#### Properties

##### className?

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

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

## Variables

### 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.

#### Parameters

| Parameter | Type                           |
| --------- | ------------------------------ |
| `props`   | `TooltipTriggerComponentProps` |

#### Returns

`Element`

#### Param

**props**

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

#### Returns

The trigger with its tooltip.

## Functions

### 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.

#### Parameters

| Parameter | Type                            | Description                                                      |
| --------- | ------------------------------- | ---------------------------------------------------------------- |
| `props`   | [`TooltipProps`](#tooltipprops) | React Aria's tooltip props (`placement`, `offset`) and the text. |

#### Returns

`Element`

The tooltip.

#### Example

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