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 render={<Button variant="outline">Hover</Button>} />
<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>