david_bai
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
// A custom wrapper for simple use
|
|
// Simple usage, use the convenience component
|
|
// import { Tooltip } from '@/components/Tooltip';
|
|
|
|
// <Tooltip content="This is the tooltip content">
|
|
// <button>Hover to see</button>
|
|
// </Tooltip>
|
|
|
|
// When more customization is needed, use the base components
|
|
// import {
|
|
// Tooltip,
|
|
// TooltipContent,
|
|
// TooltipProvider,
|
|
// TooltipTrigger,
|
|
// } from '@/components/ui/tooltip';
|
|
|
|
// <TooltipProvider>
|
|
// <Tooltip>
|
|
// <TooltipTrigger>Hover to see</TooltipTrigger>
|
|
// <TooltipContent>
|
|
// This is the tooltip content
|
|
// </TooltipContent>
|
|
// </Tooltip>
|
|
// </TooltipProvider>
|
|
|
|
import React from "react";
|
|
import {
|
|
Tooltip as TooltipRoot,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
|
|
type TooltipProps = {
|
|
children: React.ReactNode;
|
|
content: React.ReactNode;
|
|
delayDuration?: number;
|
|
};
|
|
|
|
export const Tooltip: React.FC<TooltipProps> = ({
|
|
children,
|
|
content,
|
|
delayDuration = 200,
|
|
}) => {
|
|
return (
|
|
<TooltipProvider>
|
|
<TooltipRoot delayDuration={delayDuration}>
|
|
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
|
<TooltipContent className="whitespace-pre-line bg-primary text-primary-foreground text-xs">
|
|
{content}
|
|
</TooltipContent>
|
|
</TooltipRoot>
|
|
</TooltipProvider>
|
|
);
|
|
};
|
|
|
|
export default Tooltip;
|