# Tooltip

Shows a short label for a control on hover or focus.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Tooltip.tsx)

## Overview

A tooltip is a short visual label for a control, shown on hover and keyboard focus.

Keep the text to a few words that name or clarify the trigger.

## Examples

### Basic

```tsx
import { Button, Tooltip } from '@tempoxyz/ds'
import { Plus } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger
          render={<Button aria-label="Add funds" shape="icon" variant="secondary" />}
        >
          <Plus />
        </Tooltip.Trigger>
        <Tooltip.Popup>Add funds</Tooltip.Popup>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tooltip/Basic.tsx)

### Side

Set `side` on `Tooltip.Popup` to `top`, `bottom`, `left`, or `right`. It defaults to `top`.

```tsx
import { Button, Tooltip } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger render={<Button variant="secondary" />}>Bottom</Tooltip.Trigger>
        <Tooltip.Popup side="bottom">Shown below the trigger</Tooltip.Popup>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tooltip/Side.tsx)

### Disabled

Wrap a disabled control in a focusable trigger, since disabled elements receive no pointer or focus events.

```tsx
import { Button, Tooltip } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger render={<span tabIndex={0} />}>
          <Button disabled>Withdraw</Button>
        </Tooltip.Trigger>
        <Tooltip.Popup>Available after your first deposit.</Tooltip.Popup>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tooltip/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Tooltip.