/// Feedback

HelpTip

A "?" glyph (or any trigger) that reveals an accessible tooltip using the PDS overlay skin.

import { HelpTip } from "@protocore/pds";

View as Markdown

Basics

With no children, HelpTip renders a 14px mono "?" glyph. Put it beside a label whose meaning benefits from a one-line clarification.

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.

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 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.
If you're labelling an icon-only control, that's a plain Tooltip, not a HelpTip.
Keep the hint to a phrase or a sentence; a tooltip is not a place for paragraphs or interactive content.

Usage

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

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.

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 `<button>` with an accessible `label` (default "More info").
Content is supplementary by design — never place essential information or interactive elements inside it.
A short `delayDuration` avoids flicker without making keyboard users wait.

`HelpTip` props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Custom trigger. When omitted, a 14px mono "?" glyph button is rendered.
`className`	`string`	—	Extra className applied to the default glyph trigger.
`delayDuration`	`number`	`200`	Delay in ms before the tooltip opens.
`hint` *	`ReactNode`	—	Tooltip content shown on hover / focus of the trigger.
`label`	`string`	`More info`	Accessible label for the default "?" glyph trigger.
`side`	`enum`	`top`	Preferred side to render the tooltip.
`sideOffset`	`number`	`6`	Gap in px between the trigger and the tooltip.