The last few posts covered block-level additions — ParamField, ResponseField, Tree. This one is back to something small: an inline annotation for a single word or phrase, without breaking out of the sentence to explain it.
What it does#
Docs are full of terms that need a short aside — a rate limit, an abbreviation, a default value — that don't deserve their own paragraph. Before today, writing that aside meant a parenthetical, a footnote, or just skipping it. Tooltip wraps the term instead: a dotted underline that reveals a short note on hover or keyboard focus, so the sentence reads normally until a reader actually wants the detail.
The API enforces a rate limitRate limit100 requests per minute, per API key.See limits → on all endpoints.
That's the whole component, sitting inline in this paragraph's own MDX. The syntax:
The API enforces a <Tooltip tip="100 requests per minute, per API key." headline="Rate limit" cta="See limits" href="/docs/limits">rate limit</Tooltip> on all endpoints.tip is required — the popover's body text. headline is an optional bold line above it, for a short label like "Rate limit" above the explanation. cta and href are an optional link inside the popover; cta does nothing without href, since a label with no destination isn't worth showing. The wrapped text itself — rate limit in the example above — is the trigger: whatever you put between the opening and closing tags gets the dotted underline.
A second one, simpler, with no link: this endpoint is generally availableStable, versioned, and covered by Dokly's backwards-compatibility guarantee. as of this release.
What this doesn't do#
Tooltip is pure CSS — the same hover/focus mechanism Update and the editor's code blocks already use, so a page that never reaches for it pays nothing extra. That also means it's hover- and focus-triggered only, not tap-triggered on touch screens; a mobile reader gets the trigger's dotted-underline styling but no built-in way to open the popover without a keyboard. Treat the trigger text as readable on its own, the same discipline Icon's decorative-only design already asked for.
Left out on purpose: no className prop. Nothing in Dokly's MDX pipeline consumes one yet — same reasoning as Update's dropped tags/rss and ParamField's dropped placeholder, each scoped out because there was no real consumer to build it for.
That brings Dokly to 22 top-level MDX components, up from 11 a couple of months ago. The named gap list from the competitor audit is down to one: Panel.
If you want a case Tooltip doesn't cover, reply to this post or use the contact page — it reaches me directly.
Changelog entries#
Tooltip component · Added · An inline dotted-underline annotation that reveals a short note on hover or keyboard focus, with an optional headline and link.