import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as ResponsiveTooltipStories from './ResponsiveTooltip.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={ResponsiveTooltipStories} />

<Title>ResponsiveTooltip</Title>
<Subtitle>
  Tooltip on desktop, tappable popover on mobile. Automatically switches
  behavior based on viewport size.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/tooltip',
    },
  ]}
/>
<LifecycleTag variant="Stable" />
**Component type:** Abstraction over Tooltip

<Canvas of={ResponsiveTooltipStories.Default} sourceState="shown" />
<Controls of={ResponsiveTooltipStories.Default} />

## When to use

Use `ResponsiveTooltip` when the tooltip content must be accessible on touch devices. On desktop it behaves like `Tooltip` (hover to show). On mobile it renders as a `Popover` (tap to open/close). Use plain `Tooltip` when your product is desktop-only. Use `InfoTooltip` for a pre-built information icon trigger.

## Import

```tsx
import {
  ResponsiveTooltip,
  ResponsiveTooltipTrigger,
  ResponsiveTooltipContent,
} from '@chainlink/blocks'
```

## Anatomy

```tsx
<ResponsiveTooltip>
  <ResponsiveTooltipTrigger asChild>
    <Button variant="ghost" size="sm">
      More info
    </Button>
  </ResponsiveTooltipTrigger>
  <ResponsiveTooltipContent>Helpful information here.</ResponsiveTooltipContent>
</ResponsiveTooltip>
```

## Subcomponents

- `ResponsiveTooltip`: Root state container. No `TooltipProvider` required — it's included internally.
- `ResponsiveTooltipTrigger`: The element that shows the tooltip/popover. Use `asChild` to make any element the trigger.
- `ResponsiveTooltipContent`: Floating content. Accepts `side`, `align`, and `hideArrow`. Renders as a tooltip on `sm+` viewports and as a popover on `xs`.

## Responsive Behavior

| Viewport                  | Mode    | Interaction                                            |
| ------------------------- | ------- | ------------------------------------------------------ |
| `sm` and larger (desktop) | Tooltip | Shows on hover with 200ms delay                        |
| `xs` (mobile)             | Popover | Shows on tap, dismisses on second tap or outside click |

No manual viewport detection needed — the component handles the switch automatically.

## Examples

### All sides

<Canvas of={ResponsiveTooltipStories.AllSides} sourceState="shown" />

### All alignments

<Canvas of={ResponsiveTooltipStories.AllAlignments} sourceState="shown" />

### No arrow

<Canvas of={ResponsiveTooltipStories.NoArrow} sourceState="shown" />

## Related components

- `Tooltip` for desktop-only tooltip behavior (simpler, no Popover fallback)
- `InfoTooltip` for a pre-built information icon trigger