Tooltips

A component used to display additional information when hovering over a word or phrase.

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

You can use tooltips in your Markdown content to provide additional information when hovering over a word or phrase.

This a tooltip Hover me show on top and Hover me show on bottom thanks you.

Props

PropTypeDefaultDescription
textReactNode"?"The displayed trigger text that can be hovered/focused.
tipReactNode""The tooltip content that appears when the trigger is active.
side"top" "bottom""top"The tooltip's position relative to the trigger.
classNamestring-Additional classes for the tooltip wrapper.
styleCSSProperties-Additional inline styles for the tooltip wrapper.

Tooltip also inherits the built-in props HTMLAttributes<HTMLSpanElement>.

Output Markdown

The above Markdown is converted to:

mdx
This a tooltip <Tooltip text="Hover me show on top" tip="npx @docubook/cli@latest" side="top" /> and <Tooltip text="Hover me show on bottom" tip="npx @docubook/cli@latest" side="bottom" /> thanks you.
Edit this page

Last updated May 5, 2026