Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

Import from the package. Do not run shadcn add in your app.

tsx

import { Tooltip, TooltipTrigger, TooltipContent } from "@carsxe/design-system/components/tooltip"

Usage

tsx

import { Button } from "@carsxe/design-system/components/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@carsxe/design-system/components/tooltip"

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>Hover</TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

API Reference

Prop	Type	Default
side	"top" \| "right" \| "bottom" \| "left" (TooltipContent)	"top"