Tooltip

Tooltip is a compound component that provides tooltip functionality.

Active

Tooltip

Installation

npm install @your-design-system/tooltip

import { Tooltip } from "@/components/ui/tooltip"

export function TooltipDemo() {
  return (
    <Tooltip content={"content"}>
      {/* Content */}
    </Tooltip>
  )
}

API Reference

Prop	Type	Default	Description
`content`*	`string`	-	The content prop for the component.
`side`	`enum`	`top`	The side prop for the component. Options: top \| right \| bottom \| left

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

z-50overflow-hiddenrounded-mdborderbg-popoverpx-3py-1.5text-xstext-popover-foregroundshadow-md

Design System Compliance

This component is validated against atomic design principles and foundation token usage.

⚠ Atomic Design Issues

Issue 1Hardcoded spacing found: px-3, py-1.5. Use semantic spacing tokens.

Fix these issues to ensure your component integrates properly with the design system.

On This Page