How to Add a Tooltip to React

Before installing the Tooltip, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 processing your styles and a @/ path alias pointing at your source directory — the component ships as a .tsx file, so TypeScript is part of the stack. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; the installation page lists the minimal config for a custom setup. The Tooltip has no runtime UI dependency — no Floating UI, no Popper, no Radix — so nothing new gets version-locked into your bundle, and it needs no provider at your app root. One layout detail matters: the bubble is positioned with plain CSS relative to its trigger, so the trigger must not be clipped by an ancestor with overflow: hidden on the side the tooltip opens toward.

Run the CLI from your project root to add the Tooltip source. The command writes a single tooltip.tsx under your UI directory; there is no runtime Drivn package to version-lock, and the CLI docs cover the flags for targeting a custom path or adding several components in one run. After install the file is yours — a future Drivn release will not overwrite your edits — and the whole component is a short file you can read top to bottom, from the styles object through the two nested <span> elements. The Tooltip has no peer imports beyond React and the cn class-merge helper, so there is nothing else to add. Commit the file for a clean baseline before wiring it in.

Import Tooltip and wrap any trigger element as its children, passing the hint text through the content prop. The trigger renders inline, and the bubble is a sibling <span> that stays hidden until the user hovers or focuses the wrapper. There is no open state to manage and no onOpenChange handler — visibility is driven entirely by Tailwind's group-hover:opacity-100 and group-focus-within:opacity-100 variants on the bubble, so the tooltip shows on mouse hover and, because the wrapper carries tabIndex={0}, on keyboard focus too. That focus path is what makes it usable without a mouse. Wrap an icon button to label it, or wrap a snippet of text to explain a term. The content prop is a plain string, which keeps the markup flat and the accessible name predictable.

The position prop places the bubble on one of four sides — top (the default), bottom, left, or right — and each maps to a preset entry in the styles.positions object. The top value anchors the bubble with bottom-full left-1/2 -translate-x-1/2 mb-2, sitting it above the trigger and centering it horizontally; left and right center it vertically instead. Because the positions are plain Tailwind utility strings rather than a runtime layout calculation, there is no measurement pass and no flip-on-collision logic — you pick the side that has room. Choose top or bottom for inline text and toolbar buttons, and left or right in a vertical list or sidebar where a stacked tooltip would overlap the next row. The prop is typed as keyof typeof styles.positions, so the four values autocomplete with no magic strings.

Every visual detail of the bubble lives in the tip entry of the styles object, and because Drivn writes the source into your repo you edit it directly rather than threading a config prop. By default the bubble is a small dark pill — rounded-lg bg-foreground text-background with px-2.5 py-1.5 text-xs font-medium — that fades in over a transition-opacity from opacity-0. It is marked pointer-events-none so it never intercepts a click meant for the trigger, and whitespace-nowrap so short hints stay on one line. To restyle it — a lighter surface, a wider bubble, a slower fade — you change these Tailwind classes in the one object. The block below is copied verbatim from tooltip.ts. See theming to align the bg-foreground and text-background tokens it references with your palette, and the Tooltip reference for the full props table.