@edux-design/tooltips

@edux-design/tooltips

Radix-based tooltip primitives with baked-in Edux motion + colors. Provides TooltipProvider, Tooltip, TooltipTrigger, and TooltipContent.

Installation

pnpm add @edux-design/tooltips @radix-ui/react-tooltip @edux-design/utils
# or
npm install @edux-design/tooltips @radix-ui/react-tooltip @edux-design/utils

Peer deps: react@^19.1.0, react-dom@^19.1.0.

Usage

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@edux-design/tooltips";

export function IconWithTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button className="p-2 rounded-md hover:bg-bg-subtle">?</button>
        </TooltipTrigger>
        <TooltipContent side="bottom" sideOffset={6}>
          Helpful hint goes here.
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

TooltipContent accepts Radix placement props (side, sideOffset) plus className. It automatically renders the arrow and uses a subtle fade/translate animation via Tailwind classes.

Development

pnpm --filter @edux-design/tooltips lint
pnpm --filter @edux-design/tooltips check-types
pnpm --filter @edux-design/tooltips build

Story: src/demos/Tooltip.stories.jsx.

Notes

• Always wrap tooltips in TooltipProvider so hover/focus delay groups behave as expected.
• TooltipTrigger forwards props to Radix, so you can use asChild to keep DOM output clean.
• For accessible labeling, ensure the trigger already has descriptive text or connect it with aria-label.