# InfoTip

> The ⓘ. Extra context that survives touch, because it opens on press.

Source: https://lopifi.com/components/info-tip
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Primitives — The layer everything else composes. Build these first; nothing above them is right until they are.
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/01-primitives

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/info-tip
```

## Specification

> The ⓘ. Additional context, reachable on every input.

```tsx
<InfoTip about="Why this account needs reconnecting" label="This balance may be out of date">
  Mercury revoked this connection's authorization. Last synced 21 Sep 2026, 09:12 UTC.
</InfoTip>
```

```ts
interface InfoTipProps {
  /** An optional bolded first line. A term; omit it for a plain sentence. */
  label?: React.ReactNode;
  children: React.ReactNode;
  /** The affordance's accessible name — "About available balance". */
  about: string;
  side?: "top" | "bottom" | "left" | "right";
  align?: "start" | "center" | "end";
  /** Replaces the ⓘ glyph — a warning triangle beside a broken state, say. */
  trigger?: React.ReactNode;
}
```

A **Popover**, not a Tooltip, and that is the entire design. It opens on hover on a fine pointer,
on press everywhere, and on focus from the keyboard — so the sentence inside it is reachable on a
phone, which is what licenses putting a real sentence there at all. Escape and an outside press
close it. 16px glyph, 40px hit area, `--text-tertiary` at rest.

**Use it to shorten an alert.** `"Reauthorization required — this balance may be out of date"` in a
one-third-width card wraps to three lines and reads as a paragraph in a strip meant to read as a
state. `"Reauthorization required"` plus an ⓘ says the same thing in one line, and the explanation
is one press away instead of permanently in the way.

**Never** put an action, a link the user must follow, or the only copy of a number inside one.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.