Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website synced 2025-06-26 18:16:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: integrate TooltipPrimitive for improved tooltip rendering in Ripple component

Browse Source
This commit is contained in:
Mauricio Siu
2025-03-16 22:23:02 -06:00
parent 4ba86672f8
commit 42b3ac606a
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/website/components/ui/ripple.tsx
View File

@@ -2,6 +2,7 @@
import React from "react"; import React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import Link from "next/link"; import Link from "next/link";
import { Avatar, AvatarFallback, AvatarImage } from "./avatar"; import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
import { import {
@@ -10,7 +11,6 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "./tooltip"; } from "./tooltip";
interface RippleProps { interface RippleProps {
mainCircleSize?: number; mainCircleSize?: number;
mainCircleOpacity?: number; mainCircleOpacity?: number;
@@ -223,11 +223,13 @@ const Ripple = React.memo(function Ripple({
</Avatar> </Avatar>
</Link> </Link>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipPrimitive.Portal>
<p className="text-xs font-semibold "> <TooltipContent>
{item.name} <p className="text-xs font-semibold ">
</p> {item.name}
</TooltipContent> </p>
</TooltipContent>
</TooltipPrimitive.Portal>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</div> </div>
@@ -270,11 +272,13 @@ const Ripple = React.memo(function Ripple({
</Avatar> </Avatar>
</Link> </Link>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipPrimitive.Portal>
<p className="text-xs font-semibold "> <TooltipContent>
{item.name} <p className="text-xs font-semibold ">
</p> {item.name}
</TooltipContent> </p>
</TooltipContent>
</TooltipPrimitive.Portal>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</div> </div>
@@ -317,11 +321,13 @@ const Ripple = React.memo(function Ripple({
</Avatar> </Avatar>
</Link> </Link>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipPrimitive.Portal>
<p className="text-xs font-semibold "> <TooltipContent>
{item.name} <p className="text-xs font-semibold ">
</p> {item.name}
</TooltipContent> </p>
</TooltipContent>
</TooltipPrimitive.Portal>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</div> </div>