# TooltipProvider

A convenience wrapper that combines `TooltipTrigger` and `Tooltip` into a single component. The simplest way to add tooltips.

## When to Use

- Simple tooltips with minimal configuration
- Wrapping elements that need tooltip on hover
- When separate `TooltipTrigger` + `Tooltip` would be verbose

## Properties

- **`title`** `ReactNode` — Tooltip content
- **`tooltipStyles`** `Styles` — Custom styles for the tooltip container
- **`width`** `string` — Tooltip width
- **`placement`** `Placement` (default: `'top'`) — Position of the tooltip relative to its trigger
- **`offset`** `number` (default: `8`) — Distance between the tooltip and the trigger element
- **`crossOffset`** `number` (default: `0`) — Cross-axis offset of the tooltip
- **`delay`** `number` (default: `250`) — The delay time in ms for the tooltip to show up
- **`closeDelay`** `number` (default: `500`) — The delay time in ms for the tooltip to close
- **`isMaterial`** `boolean` — Enables material-style tooltip with auto pointer events
- **`isLight`** `boolean` — Uses light color scheme for the tooltip
- **`isOpen`** `boolean` — Controlled open state of the tooltip
- **`defaultOpen`** `boolean` — Whether the tooltip is open by default (uncontrolled)
- **`onOpenChange`** `(isOpen: boolean) => void` — Callback when the tooltip open state changes
- **`trigger`** `'focus'` — When set, opens the tooltip only on focus instead of both focus and hover
- **`shouldCloseOnPress`** `boolean` (default: `true`) — Whether the tooltip closes when the trigger is pressed

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

### Simple tooltip

```jsx
<TooltipProvider title="Help text">
  <Button>Hover me</Button>
</TooltipProvider>
```

### Render function children

```jsx
<TooltipProvider title="Click to copy">
  {(triggerProps, ref) => (
    <span {...triggerProps} ref={ref}>Custom trigger</span>
  )}
</TooltipProvider>
```
