> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

> Small overlay for short contextual hints.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/tooltip-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=bc24e9c4a3dab4b3db249cd4a1f34dcb" alt="Tooltip component preview (light)" width="200" data-path="images/ui/tooltip-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/tooltip.tsx`

## When to use

* Brief, supplemental information on hover/focus. Keep content short.
* Avoid for critical information; use popovers/dialogs for longer text.

## Usage

```tsx sabo/src/components/ui/tooltip.tsx theme={null}
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover me</Button>
      </TooltipTrigger>
      <TooltipContent sideOffset={0}>This is a tooltip</TooltipContent>
    </Tooltip>
  );
}
```

## Key props

<ParamField path="TooltipContent.sideOffset" type="number" default="0">
  Offset in pixels between trigger and tooltip.
</ParamField>

<ParamField path="TooltipProvider.delayDuration" type="number" default="0">
  Global delay before showing. Our wrapper defaults to 0.
</ParamField>

<Note>
  This component forwards all props from Radix Tooltip primitives (Provider/Root/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip)
</Note>

## Styling tip

* Content uses foreground/background inversion; keep it short (1–2 lines).
* Arrow is included; adjust size via <code>\[data-slot=tooltip-content]</code> classes.

## Accessibility

* Tooltips appear on hover and focus. Ensure triggers are keyboard focusable.