add a tooltip wrapper

src/components/player/claim-profile.tsx

@@ -5,8 +5,8 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { setPlayerIdCookie } from "../../common/website-utils";
 import useDatabase from "../../hooks/use-database";
 import { useToast } from "../../hooks/use-toast";
+import Tooltip from "../tooltip";
 import { Button } from "../ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 type Props = {
   /**
@@ -39,15 +39,10 @@ export default function ClaimProfile({ playerId }: Props) {
   }
 
   return (
-    <Tooltip>
+    <Tooltip display={<p>Set as your profile</p>}>
-      <TooltipTrigger asChild>
+      <Button variant={"outline"} onClick={claimProfile}>
-        <Button variant={"outline"} onClick={claimProfile}>
+        <CheckIcon className="size-6 text-green-500" />
-          <CheckIcon className="size-6 text-green-500" />
+      </Button>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Set as your profile</p>
-      </TooltipContent>
     </Tooltip>
   );
 }

src/components/player/score/score-info.tsx

@@ -1,10 +1,9 @@
 import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
 import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
-import { songDifficultyToColor } from "@/common/song-utils";
 import FallbackLink from "@/components/fallback-link";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import Tooltip from "@/components/tooltip";
-import { StarIcon } from "@radix-ui/react-icons";
+import { StarIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import Image from "next/image";
 
@@ -22,14 +21,21 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
   return (
     <div className="flex gap-3">
       <div className="relative flex justify-center  h-[64px]">
-        <Tooltip>
+        <Tooltip
-          <TooltipTrigger
+          display={
-            asChild
+            <>
-            className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs"
+              <p>
-            style={{
+                Difficulty: <span className="font-bold">{diff}</span>
-              backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
+              </p>
-            }}
+              {leaderboard.stars > 0 && (
-          >
+                <p>
+                  Stars: <span className="font-bold">{leaderboard.stars}</span>
+                </p>
+              )}
+            </>
+          }
+        >
+          <div className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs">
             {leaderboard.stars > 0 ? (
               <div className="flex gap-1 items-center justify-center">
                 <p>{leaderboard.stars}</p>
@@ -38,17 +44,7 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
             ) : (
               <p>{diff}</p>
             )}
-          </TooltipTrigger>
+          </div>
-          <TooltipContent>
-            <p>
-              Difficulty: <span className="font-bold">{diff}</span>
-            </p>
-            {leaderboard.stars > 0 && (
-              <p>
-                Stars: <span className="font-bold">{leaderboard.stars}</span>
-              </p>
-            )}
-          </TooltipContent>
         </Tooltip>
         <Image
           unoptimized

src/components/tooltip.tsx

@@ -0,0 +1,22 @@
+import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  /**
+   * What will trigger the tooltip
+   */
+  children: React.ReactNode;
+
+  /**
+   * What will be displayed in the tooltip
+   */
+  display: React.ReactNode;
+};
+
+export default function Tooltip({ children, display }: Props) {
+  return (
+    <ShadCnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent>{display}</TooltipContent>
+    </ShadCnTooltip>
+  );
+}