Tooltip

A tooltip component for displaying additional information on hover or focus.

Preview

Usage

import { Button } from "@vitnode/core/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@vitnode/core/components/ui/tooltip";
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Faster Tooltips

If you don't need custom props for components like TooltipTrigger or TooltipContent, you can use the TooltipWithContent component to enable faster tooltips.

import { Button } from "@vitnode/core/components/ui/button";
import { TooltipWithContent } from "@vitnode/core/components/ui/tooltip";
import { PlayIcon } from "lucide-react";
<TooltipWithContent text="Now">
  <Button variant="ghost" size="icon" aria-label="Now">
    <PlayIcon />
  </Button>
</TooltipWithContent>

API Reference

Radix UI - Tooltip

Tooltip - VitNode