fix tooltips

projects/website/src/components/footer.tsx

@@ -54,7 +54,7 @@ export default function Footer() {
           return (
             <Link
               key={index}
-              className="px-2 text-pp hover:brightness-50 transition-all transform-gpu"
+              className="px-2 text-pp hover:brightness-[66%] transition-all transform-gpu"
               href={item.link}
               target={item.openInNewTab ? "_blank" : undefined}
             >

projects/website/src/components/leaderboard/leaderboard-scores.tsx

@@ -162,7 +162,7 @@ export default function LeaderboardScores({
           })}
       </div>
 
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto relative">
         <table className="table w-full table-auto border-spacing-2 border-none text-left text-sm">
           <thead>
             <tr>

projects/website/src/components/loaders/fullscreen-loader.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export default function FullscreenLoader({ reason }: Props) {
   return (
-    <div className="absolute w-screen h-screen bg-background brightness-50 flex flex-col gap-6 items-center justify-center">
+    <div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
       <div className="flex flex-col items-center justify-center">
         <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
         <p className="text-gray-300 text-md text-center">{reason}</p>

projects/website/src/components/player/chart/player-charts.tsx

@@ -78,7 +78,7 @@ export default function PlayerCharts({ player }: PlayerChartsProps) {
               >
                 <button
                   onClick={() => setSelectedChart(chart)}
-                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-50 transform-gpu transition-all`}
+                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-[66%] transform-gpu transition-all`}
                 >
                   {chart.icon}
                 </button>

projects/website/src/components/player/player-header.tsx

@@ -110,7 +110,9 @@ const playerData = [
             player,
             "rank",
             <Link href={`/ranking/${player.rankPages.global}`}>
-              <p className="hover:brightness-50 transition-all transform-gpu">#{formatNumberWithCommas(player.rank)}</p>
+              <p className="hover:brightness-[66%] transition-all transform-gpu">
+                #{formatNumberWithCommas(player.rank)}
+              </p>
             </Link>
           )}
           {rankChange != 0 && renderDailyChange(rankChange, <p>The change in rank compared to yesterday</p>)}
@@ -133,7 +135,7 @@ const playerData = [
             player,
             "countryRank",
             <Link href={`/ranking/${player.country}/${player.rankPages.country}`}>
-              <p className="hover:brightness-50 transition-all transform-gpu">
+              <p className="hover:brightness-[66%] transition-all transform-gpu">
                 #{formatNumberWithCommas(player.countryRank)}
               </p>
             </Link>
@@ -154,7 +156,7 @@ const playerData = [
           {renderChange(
             player,
             "pp",
-            <p className="hover:brightness-50 transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
+            <p className="hover:brightness-[66%] transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
           )}
           {ppChange != 0 && renderDailyChange(ppChange, <p>The change in pp compared to yesterday</p>)}
         </div>

projects/website/src/components/player/player-info.tsx

@@ -33,7 +33,7 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
         />
       </Avatar>
       {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
-      <Link className="transform-gpu transition-all hover:brightness-50" href={`/player/${player.id}`}>
+      <Link className="transform-gpu transition-all hover:brightness-[66%]" href={`/player/${player.id}`}>
         <p
           className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
           style={{

projects/website/src/components/player/player-scores.tsx

@@ -199,7 +199,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
           {searchTerm && ( // Show clear button only if there's a query
             <button
               onClick={clearSearch}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-50 transform-gpu transition-all cursor-default"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-[66%] transform-gpu transition-all cursor-default"
               aria-label="Clear search"
             >
               <XMarkIcon className="w-5 h-5" />

projects/website/src/components/ranking/mini.tsx

@@ -97,7 +97,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             <Link
               key={index}
               href={`/player/${playerRanking.id}`}
-              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-50 first:rounded-t last:rounded-b"
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-[66%] first:rounded-t last:rounded-b"
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">

projects/website/src/components/score/score-feed/score-feed.tsx

@@ -47,7 +47,7 @@ export default function ScoreFeed() {
             <p className="text-sm">
               Set by{" "}
               <Link href={`/player/${player.id}`}>
-                <span className="text-pp hover:brightness-50 transition-all transform-gpu">{player.name}</span>
+                <span className="text-pp hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
               </Link>
             </p>
             <Score

projects/website/src/components/score/score-info.tsx

@@ -59,7 +59,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
         <div className="overflow-y-clip">
           <Link
             href={`/leaderboard/${leaderboard.id}`}
-            className="cursor-pointer select-none hover:brightness-50 transform-gpu transition-all text-pp w-fit"
+            className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-pp w-fit"
           >
             {leaderboard.songName} {leaderboard.songSubName}
           </Link>
@@ -67,7 +67,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
             <p className="text-gray-400">{leaderboard.songAuthorName}</p>
             <FallbackLink
               href={mappersProfile}
-              className={mappersProfile && "hover:brightness-50 transform-gpu transition-all w-fit"}
+              className={mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit"}
             >
               {leaderboard.levelAuthorName}
             </FallbackLink>

projects/website/src/components/score/score-rank-info.tsx

@@ -17,7 +17,7 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
         <Link href={`/leaderboard/${leaderboard.id}/${getPageFromRank(score.rank, 12)}`}>
-          <p className="text-pp cursor-default hover:brightness-50 transition-all transform-gpu cursor-pointer">
+          <p className="text-pp cursor-default hover:brightness-[66%] transition-all transform-gpu cursor-pointer">
             #{formatNumberWithCommas(score.rank)}
           </p>
         </Link>

projects/website/src/components/ui/tooltip.tsx

@@ -2,19 +2,28 @@
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
-
+import { useEffect, useState } from "react";
 import { cn } from "@/common/utils";
+import ReactDOM from "react-dom";
 
 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>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, ...props }, ref) => {
+  const [mounted, setMounted] = useState(false);
+
+  // Ensure the tooltip is rendered after the component has mounted
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // If mounted, render the tooltip using React Portal
+  return mounted
+    ? ReactDOM.createPortal(
         <TooltipPrimitive.Content
           ref={ref}
           sideOffset={sideOffset}
@@ -23,8 +32,12 @@ const TooltipContent = React.forwardRef<
             className
           )}
           {...props}
-  />
-));
+        />,
+        document.body // Render the tooltip outside the table and its overflow
+      )
+    : null;
+});
+
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };