src/components/info-hint.tsxInfo Hint
The quiet inline help affordance: a muted circle-i that opens a small, self-contained popover with one short answer. It’s the on-demand sibling to the Notice (which explains always-on). Tap it, or press Enter when focused; it dismisses on outside click or Esc.
Anchor it to a group, section, or field label ONLY: never a page title, a value, a button, or a Notice, which carry their own help. And hold the density budget: explain a concept once at its canonical home, at most one dot per glance, a handful across the whole journey. The rules live in THEME.md §16.
On a group label
A “Define” hint: what an unfamiliar term or figure means. Wrap key terms in <strong> to lift them to ink.
On a field label
A “Rule” hint: a requirement that isn’t visible from the field itself.
Rest, hover, open
Muted at rest so it recedes; ink with a soft disc on hover, focus, and while open. 24px tap target around a ~14px glyph.
Used on
- Console
- /console (every page)/console/business-reporting/btw-hours/console/business-reporting/enrollment/console/business-reporting/fleet-size/console/business-reporting/payroll/console/catalog/console/financials/console/financials/balances/console/financials/earned/console/financials/refunds/console/financials/sales/console/financials/transactions/console/financials/waived-fees/console/fleet/[id]/console/locations/console/locations/[id]/console/locations/franchises/[id]/console/people/[id]/console/reporting/certificate-upload/console/reporting/dps-report/console/reporting/student-records/console/scheduling
- Portal
- /(student) (every page)/dashboard/dashboard/course/dashboard/lessons