Tooltip

Hover- or click-triggered bubble with optional headline and call-to-action link. Use for inline glosses, term definitions, and "learn more" hints.

<Tooltip> wraps any inline trigger (a word, phrase, icon) and shows a floating bubble on hover or click. Optional headline and a single CTA link fit common “quick definition + read more” patterns.

Hover the underlined word: MDX to see a definition.

import { Tooltip } from '@publier/primitives';

Hover the underlined word:
<Tooltip tip="MDX is Markdown with JSX component support — you can mix prose and JSX in the same file.">
  <span style="text-decoration:underline dotted; cursor:help;">MDX</span>
</Tooltip> to see a definition.

With a headline

<Tooltip
  tip="A static site generator turns content files into pre-rendered HTML at build time, ready to serve from any static host."
  headline="What is a static site generator?"
>
  <span style="text-decoration:underline dotted; cursor:help;">static site generator</span>
</Tooltip>

With a call-to-action

Add cta + href for a “read more” path out of the tooltip:

<Tooltip
  tip="The MDX compiler, remark/rehype pipeline, and content collections are all wired automatically. Zero config."
  headline="What does Publier auto-wire?"
  cta="See the auto-wiring reference"
  href="/docs/organize/configuration#what-publier-auto-wires"
>
  <span style="text-decoration:underline dotted; cursor:help;">the Publier integration</span>
</Tooltip>

Props

Prop	Type	Default	Description
`tip`	`string`	—	Body text inside the bubble. Required.
`headline`	`string`	—	Bold line rendered above the tip.
`cta`	`string`	—	CTA link text. Requires `href`.
`href`	`string`	—	CTA destination URL. Requires `cta`.

Trigger content passes through as children.

Behaviour

Opens on mouseenter, closes on mouseleave. Click toggles open/closed (sticky on touch devices).
Bubble has role="tooltip" for screen readers.
Lazy by default — interactive code only loads when the trigger is engaged.

Accessibility notes

The trigger is a <span> by design — tooltips should decorate existing inline content, not add new interactive elements. Style your trigger (e.g. dotted underline) so sighted readers know it’s hoverable.
For keyboard users, add tabIndex={0} and role="button" to the trigger if the tooltip content is essential to the page.

Longer inline explanations → Callouts.
Visual definitions with images → Frame.