# HelpTip
- **Category:** Feedback (`feedback`)
- **Slug:** `feedback/help-tip`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { HelpTip } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/feedback/help-tip
> A "?" glyph (or any trigger) that reveals an accessible tooltip using the PDS overlay skin.
## When to use it
Use **HelpTip** for a short, *supplementary* clarification attached to a specific label or control — the definition of a metric, a unit, a caveat. It's [Tooltip](/overlay/tooltip) pre-skinned as an inline help affordance with a built-in glyph.
- If the information is essential (not supplementary), don't hide it behind a hover — put it in the copy or a [Callout](/feedback/callout).
- If you're labelling an icon-only control, that's a plain [Tooltip](/overlay/tooltip), not a HelpTip.
- Keep the hint to a phrase or a sentence; a tooltip is not a place for paragraphs or interactive content.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | Custom trigger. When omitted, a 14px mono "?" glyph button is rendered. |
| `className` | `string` | no | — | Extra className applied to the default glyph trigger. |
| `delayDuration` | `number` | no | `200` | Delay in ms before the tooltip opens. |
| `hint` | `ReactNode` | yes | — | Tooltip content shown on hover / focus of the trigger. |
| `label` | `string` | no | `More info` | Accessible label for the default "?" glyph trigger. |
| `side` | `enum` | no | `top` | Preferred side to render the tooltip. |
| `sideOffset` | `number` | no | `6` | Gap in px between the trigger and the tooltip. |
## Examples
### Basics
With no children, HelpTip renders a 14px mono "?" glyph. Put it beside a label whose meaning benefits from a one-line clarification.
```tsx
import { HelpTip, HStack, Text } from "@protocore/pds";
export default function Basics() {
return (
Effective APR
);
}
```
### Custom trigger and side
Pass any focusable element as the trigger — it's wired through Radix `asChild`. Use `side` (and `sideOffset`) to steer where the tip appears.
```tsx
import { HelpTip, IconButton } from "@protocore/pds";
import { Info } from "lucide-react";
// Pass any focusable element as the trigger — HelpTip wires it up via asChild.
export default function CustomTrigger() {
return (
);
}
```
## Do & don't
**Do**
- Attach it to the exact term or control it explains.
- Keep the hint to a short phrase or single sentence.
- Use it for supplementary detail a user can succeed without.
- Pass a custom trigger when the default "?" glyph doesn't fit.
**Don't**
- Hide essential or task-blocking information inside a hover.
- Put links, buttons, or long copy in the tooltip — it isn't focusable content.
- Scatter HelpTips on every label; reserve them for genuine ambiguity.
- Rely on hover only — the trigger must also open on keyboard focus (it does).
## Accessibility
**Keyboard**
| Keys | Action |
| --- | --- |
| `Tab` | Moves focus to the trigger, which opens the tooltip. |
| `Shift + Tab` | Moves focus away, closing the tooltip. |
| `Escape` | Closes the tooltip while the trigger stays focused. |
**Notes**
- Built on Radix Tooltip: it opens on both hover and keyboard focus, so it's not mouse-only.
- The default glyph trigger is a real `