React Tooltip Component Examples

The simplest use is one Tooltip wrapping a trigger, with the label passed as the content string. With no position prop it defaults to top, so the tip appears centered above the trigger on hover. Because the wrapper carries tabIndex={0} and the tip reacts to group-focus-within, the same label also appears when the trigger receives keyboard focus — no extra props required.

There is nothing to wire: no provider, no open state, no effect. The content is rendered into a pointer-events-none span so it never steals the pointer from the trigger underneath, and the whole thing is plain CSS, so it works in a Server Component without a 'use client' boundary. This is the canonical pattern for naming an otherwise unlabeled control — an icon button, a status dot, a truncated value.

The position prop places the tip on any of four sides — top, bottom, left, or right — and is typed as keyof typeof styles.positions, so the allowed values autocomplete with no magic strings. Each value indexes into a styles.positions object of static Tailwind utilities that absolutely-position and center the tip relative to the trigger: top uses bottom-full ... mb-2, bottom uses top-full ... mt-2, and the horizontal sides use right-full/left-full with a vertical centering translate.

Pick the side that keeps the tip clear of nearby content and screen edges. Because placement is pure CSS with no collision detection, a top tooltip stays on top even near the top of the viewport — choose bottom for triggers in a page header, or right for items in a left rail. Mixing positions in one toolbar is free; each Tooltip reads its own position independently.

The most common job for a tooltip is naming an icon-only button, where the icon alone is ambiguous. Wrap the Button — or any clickable element — in a Tooltip and the label appears on hover and on focus. Because the tip span sits inside the same group wrapper and is pointer-events-none, it never blocks the button's own click, so the control stays fully usable while the hint shows.

This pairs naturally with the icon-as-component pattern Drivn uses elsewhere: pass the Lucide icon as the button content, wrap it in a Tooltip with the action name, and you have an accessible, self-describing control. Keep the content short — a verb or noun phrase — since the tip is a single whitespace-nowrap line by default.

Tooltips are not only for buttons. Wrap a word, an abbreviation, or a Badge to attach a definition that appears on hover. Because the wrapper is an inline-flex span, it sits inline in running text without breaking the line, and the trigger keeps its own styling — underline a term, dim a label — while the tip explains it above. The trigger remains focusable via tabIndex={0}, so the hint is reachable by keyboard too.

Use this for glossary terms, status labels, or truncated values where the full text belongs in the tip. Keep the visible trigger meaningful on its own — a tooltip should add detail, not carry information that is unavailable without hovering — so the content stays accessible to readers who never trigger the tip.