A floating card for short explanations.
Source: src/components/ui/tooltip.tsx
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
export default function TooltipExample() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" aria-label="What counts as a video?">
<InfoIcon />
</Button>
</TooltipTrigger>
<TooltipContent>
One finished edit in one aspect ratio. Extra cuts of it are free.
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}