mirror of
https://github.com/massbug/judge4c.git
synced 2025-05-17 23:12:23 +00:00
feat(components): add TooltipButton component
- A reusable button with tooltip functionality - Supports customizable delay, tooltip content, and className - Uses shadcn/ui Tooltip and Button components
This commit is contained in:
parent
2e19c08e8b
commit
6c9351ccd2
47
src/components/tooltip-button.tsx
Normal file
47
src/components/tooltip-button.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Button, ButtonProps } from "@/components/ui/button";
|
||||||
|
|
||||||
|
interface TooltipButtonProps extends ButtonProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
delayDuration?: number;
|
||||||
|
tooltipContent: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TooltipButton = ({
|
||||||
|
children,
|
||||||
|
delayDuration = 0,
|
||||||
|
tooltipContent,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: TooltipButtonProps) => {
|
||||||
|
return (
|
||||||
|
<TooltipProvider delayDuration={delayDuration}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"h-6 w-6 px-1.5 py-0.5 border-none shadow-none hover:bg-muted",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="px-2 py-1 text-xs">
|
||||||
|
{tooltipContent}
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { TooltipButton };
|
Loading…
Reference in New Issue
Block a user