From 42b3ac606a802718f8b1f81bcd1b5b7bf04e6eb4 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 16 Mar 2025 22:23:02 -0600
Subject: [PATCH] refactor: integrate TooltipPrimitive for improved tooltip
 rendering in Ripple component

---
 apps/website/components/ui/ripple.tsx | 38 ++++++++++++++++-----------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/apps/website/components/ui/ripple.tsx b/apps/website/components/ui/ripple.tsx
index ff5bb4e..3523b13 100644
--- a/apps/website/components/ui/ripple.tsx
+++ b/apps/website/components/ui/ripple.tsx
@@ -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>