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

<Meta title="Blocks/Tooltip/InfoTooltip" of={InfoTooltipStories} />

<Title>InfoTooltip</Title>
<Subtitle>
  Pre-composed tooltip with a muted information-circle icon as the trigger.
  Drop-in for adding inline help text next to a label.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/tooltip',
    },
  ]}
/>
<LifecycleTag variant="Stable" />
**Component type:** Abstraction over ResponsiveTooltip

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

## When to use

Use `InfoTooltip` when you need a small information icon with a tooltip inline with a label or heading — the most common pattern for contextual help. It is a single-component convenience wrapper; you do not compose subcomponents. Use `ResponsiveTooltip` or `Tooltip` directly when you need a custom trigger or full composition control.

## Import

```tsx
import { InfoTooltip } from '@chainlink/blocks'
```

## Anatomy

```tsx
<Label>
  Risk threshold
  <InfoTooltip>Must be a valid EVM address (0x...).</InfoTooltip>
</Label>
```

## Examples

### All sides

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

### All alignments

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

## Related components

- `ResponsiveTooltip` for a custom trigger or when you need full composition control
- `Tooltip` for desktop-only tooltip behavior