Tooltip

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

popup
Description of the SVG image Loading...

Motion

Description of the SVG image Loading...

Installation

Run the following command:

npx ever-ui-clx@0.2.1 add demo-tooltip
npx ever-ui-clx@0.2.1 add demo-animated-tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>