use popover over tooltip for badges

src/features/badges/components/badge-showcase.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, Tooltip, Card } from "@mantine/core";
+import { Box, Text, Popover, Card } from "@mantine/core";
 import { usePlayerBadges, useAllBadges } from "../queries";
 import { useAuth } from "@/contexts/auth-context";
 import { Badge, BadgeProgress } from "../types";
@@ -115,9 +115,40 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
           }}
         >
           {badgesToDisplay.map((display) => (
-            <Tooltip
+            <Popover key={display.badge.id} width={220} position="bottom" withArrow shadow="md">
-              key={display.badge.id}
+              <Popover.Target>
-              label={
+                <Card
+                  withBorder
+                  padding="sm"
+                  radius="md"
+                  shadow={display.earned ? "xs" : undefined}
+                  style={(theme) => ({
+                    opacity: display.earned ? 1 : 0.35,
+                    cursor: "pointer",
+                    transition: 'all 0.2s ease',
+                    minHeight: 70,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderStyle: display.earned ? 'solid' : 'dashed',
+                    ':hover': {
+                      transform: display.earned ? 'translateY(-2px)' : 'none',
+                      boxShadow: display.earned ? theme.shadows.sm : undefined,
+                    },
+                  })}
+                >
+                  <Text
+                    size="xs"
+                    ta="center"
+                    fw={display.earned ? 600 : 500}
+                    c={display.earned ? undefined : "dimmed"}
+                    style={{ lineHeight: 1.3 }}
+                  >
+                    {display.badge.name}
+                  </Text>
+                </Card>
+              </Popover.Target>
+              <Popover.Dropdown>
                 <Box>
                   <Text size="xs" fw={600} mb={4}>
                     {display.badge.name}
@@ -131,41 +162,8 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                     </Text>
                   )}
                 </Box>
-              }
+              </Popover.Dropdown>
-              multiline
+            </Popover>
-              w={220}
-            >
-              <Card
-                withBorder
-                padding="sm"
-                radius="md"
-                shadow={display.earned ? "xs" : undefined}
-                style={(theme) => ({
-                  opacity: display.earned ? 1 : 0.35,
-                  cursor: "pointer",
-                  transition: 'all 0.2s ease',
-                  minHeight: 70,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  borderStyle: display.earned ? 'solid' : 'dashed',
-                  ':hover': {
-                    transform: display.earned ? 'translateY(-2px)' : 'none',
-                    boxShadow: display.earned ? theme.shadows.sm : undefined,
-                  },
-                })}
-              >
-                <Text
-                  size="xs"
-                  ta="center"
-                  fw={display.earned ? 600 : 500}
-                  c={display.earned ? undefined : "dimmed"}
-                  style={{ lineHeight: 1.3 }}
-                >
-                  {display.badge.name}
-                </Text>
-              </Card>
-            </Tooltip>
           ))}
         </Box>
       </Card>