Plandalf

Tooltips

Use tooltips for short inline definitions that should not interrupt the reader's path.

Tooltips are for tiny explanations. If the note needs a paragraph, use a callout, panel, or glossary page instead.

Basic example

Example: API documentation helps developers understand how to integrate with your service.

<Tooltip headline="API" tip="Application Programming Interface: a set of protocols for software applications to communicate." cta="Read our API guide" href="/docs/api/reference">API</Tooltip> documentation helps developers understand how to integrate with your service.

An offer is the core object behind checkout.

An <Tooltip tip="A published sale configuration that can include products, checkout layout, pricing, and completion behavior." headline="Offer">offer</Tooltip> is the core object behind checkout.

Use a linked tooltip when a short definition is useful inline, but the reader may need a full page next.

An offer timer can help create urgency without changing the checkout object.

An <Tooltip
  headline="Timer"
  tip="A deadline-aware buying surface that can point traffic toward an offer."
  cta="Read Timer docs"
  href="/docs/timers/overview"
>
  offer timer
</Tooltip> can help create urgency.

Placement

Use side="bottom" inside dense headings, tables, or short panels where the top edge would clip the tooltip.

<Tooltip
  headline="SDK"
  tip="The JavaScript package that presents offers and listens for checkout events."
  side="bottom"
>
  SDK
</Tooltip>

Authoring rules

Tooltip usage

Keep it shortone or two sentences

Tooltips should clarify a word or phrase without becoming required reading.

Do not hide warningsvisible constraints

If skipping the information can break implementation, use a callout or step instead.

Properties

tipstringrequired

Text displayed in the tooltip.

headlinestring

Text displayed before the tip text.

ctastring

Call-to-action text for the link inside the tooltip.

hrefstring

URL for the call-to-action link. Required when using cta.

Plandalf extensions

sidetop | bottomdefault: top

Preferred placement.

idstring

Stable tooltip ID for accessibility when deterministic IDs matter.

class | classNamestring

Optional utility classes for local spacing or text changes.

Callouts Use for important warnings.
Badge Use compact labels.
Disclosure Use for optional detail.

Feature detail