Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 76x 76x 76x 76x 405x 81x 81x 81x 81x 81x 648x 486x 76x 48766x 48766x 48766x 48766x 48766x 146298x 15145x 63911x 109346x 146298x 146298x | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import { cn } from "@/lib/utils";
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
variant?: "default" | "error" | "success" | "warning";
} // Add the variant type here
>(({ className, sideOffset = 4, variant = "default", ...props }, ref) => {
// Define variant styles
const variantClasses = {
default: "bg-tooltip",
error: "bg-destructive",
success: "bg-primary",
// warning: "bg-warning",
};
return (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
variantClasses[variant],
variantClasses[variant] !== "bg-muted" && "text-muted-foreground",
className,
)}
{...props}
/>
);
});
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
const ToolTipCover = ({
children,
content,
contentClassName,
variant = "default",
asChild = false,
side,
delay,
}: {
children: React.ReactNode;
content: string;
contentClassName?: string;
variant?: "default" | "error" | "success" | "warning";
asChild?: boolean;
side?: "top" | "right" | "bottom" | "left";
delay?: number;
}) => {
return (
<TooltipProvider delayDuration={delay} disableHoverableContent>
<Tooltip>
<TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipPrimitive.Portal>
<TooltipContent
variant={variant}
side={side}
className={contentClassName}
>
<p className="whitespace-pre-line">{content}</p>
</TooltipContent>
</TooltipPrimitive.Portal>
</Tooltip>
</TooltipProvider>
);
};
export {
Tooltip,
TooltipContent,
ToolTipCover,
TooltipProvider,
TooltipTrigger,
};
|