Tooltips

A component used to display additional information when hovering over a word or phrase — inline inside a paragraph.

I have implemented the tooltips component into markdown which allows you to add additional information to a word or phrase when hovering. This feature is useful for providing definitions, explanations, or any other additional information that can enhance the user experience.

Usage

Tooltips are written inline inside a paragraph. The label in [...] is the visible trigger (dotted underline); the bubble appears on hover and auto-positions itself — flipping to the side with more room and clamping to the window, so you never pick a side:

Common markdown here DocuBook Flame inline first.

Short form — the bubble defaults to the label:

Just one word to explain.

Props

PropTypeDefaultDescription
textReactNode"?"The displayed trigger text that can be hovered/focused.
tipReactNode""The bubble content that appears when the trigger is active.

That is all — the bubble auto-positions relative to the window.

Output Markdown

The above Markdown is converted to:

md
Common markdown here :tooltip[DocuBook Flame]{tip="No runtime, no server to run, no lock-in. One markdown format, readable by humans and agents alike, compiled to flat static HTML — deploy anywhere."} inline first.

Just :tooltip[one word] to explain.

Last updated Aug 13, 2026