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