add hover to all country flags

projects/website/src/components/country-flag.tsx

@@ -1,3 +1,6 @@
+import Tooltip from "@/components/tooltip";
+import { normalizedRegionName } from "@ssr/common/utils/region-utils";
+
 type Props = {
   code: string;
   size?: number;
@@ -5,12 +8,14 @@ type Props = {
 
 export default function CountryFlag({ code, size = 24 }: Props) {
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      alt="Player Country"
-      src={`/assets/flags/${code.toLowerCase()}.png`}
-      width={size * 2}
-      className={`w-[${size * 2}px] object-contain`}
-    />
+    <Tooltip display={<p>{normalizedRegionName(code)}</p>} asChild={false}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt="Player Country"
+        src={`/assets/flags/${code.toLowerCase()}.png`}
+        width={size * 2}
+        className={`w-[${size * 2}px] object-contain`}
+      />
+    </Tooltip>
   );
 }

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

@@ -11,6 +11,7 @@ import PlayerTrackedStatus from "@/components/player/player-tracked-status";
 import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
 import Link from "next/link";
 import { capitalizeFirstLetter } from "@/common/string-utils";
+import { normalizedRegionName } from "@ssr/common/utils/region-utils";
 
 /**
  * Renders the change for a stat.
@@ -23,7 +24,7 @@ const renderDailyChange = (change: number, tooltip: ReactElement, format?: (valu
   format = format ?? formatNumberWithCommas;
 
   return (
-    <Tooltip display={tooltip}>
+    <Tooltip display={tooltip} side="bottom">
       <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
         {change > 0 ? "+" : ""}
         {format(change)}

projects/website/src/components/tooltip.tsx

@@ -11,16 +11,21 @@ type Props = {
    */
   display: React.ReactNode;
 
+  /**
+   * Display the trigger as a child element.
+   */
+  asChild?: boolean;
+
   /**
    * Where the tooltip will be displayed
    */
   side?: "top" | "bottom" | "left" | "right";
 };
 
-export default function Tooltip({ children, display, side = "top" }: Props) {
+export default function Tooltip({ children, display, asChild = true, side = "top" }: Props) {
   return (
     <ShadCnTooltip>
-      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent side={side}>{display}</TooltipContent>
     </ShadCnTooltip>
   );