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.

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

Usage

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"