1 files changed, 20 insertions, 20 deletions

diff --git a/frontend/src/pages/views/ItemOverview.tsx b/frontend/src/pages/views/ItemOverview.tsx
index 8d3d4135e..43d97b3e0 100644
--- a/frontend/src/pages/views/ItemOverview.tsx
+++ b/frontend/src/pages/views/ItemOverview.tsx
@@ -26,15 +26,14 @@ import {
   createStyles,
   Grid,
   Group,
+  HoverCard,
   Image,
   List,
   MediaQuery,
-  Popover,
   Stack,
   Text,
   Title,
 } from "@mantine/core";
-import { useHover } from "@mantine/hooks";
 import { FunctionComponent, useMemo } from "react";
 
 interface Props {
@@ -138,8 +137,6 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
     return badges;
   }, [profile, profileItems]);
 
-  const { ref, hovered } = useHover();
-
   return (
     <BackgroundImage src={item?.fanart ?? ""}>
       <Grid
@@ -179,26 +176,23 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
                   {item?.title}
                 </Text>
               </Title>
-              <Popover
-                opened={hovered}
-                position="bottom"
-                withArrow
-                target={
+              <HoverCard position="bottom" withArrow>
+                <HoverCard.Target>
                   <Text
                     hidden={item?.alternativeTitles.length === 0}
                     color="white"
-                    ref={ref}
                   >
                     <FontAwesomeIcon icon={faClone} />
                   </Text>
-                }
-              >
-                <List>
-                  {item?.alternativeTitles.map((v, idx) => (
-                    <List.Item key={BuildKey(idx, v)}>{v}</List.Item>
-                  ))}
-                </List>
-              </Popover>
+                </HoverCard.Target>
+                <HoverCard.Dropdown>
+                  <List>
+                    {item?.alternativeTitles.map((v, idx) => (
+                      <List.Item key={BuildKey(idx, v)}>{v}</List.Item>
+                    ))}
+                  </List>
+                </HoverCard.Dropdown>
+              </HoverCard>
             </Group>
             <Group spacing="xs" className={classes.group}>
               {detailBadges}
@@ -219,17 +213,23 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
   );
 };
 
-type ItemBadgeProps = Omit<BadgeProps<"div">, "leftSection"> & {
+type ItemBadgeProps = Omit<BadgeProps, "leftSection"> & {
   icon: IconDefinition;
+  title?: string;
 };
 
-const ItemBadge: FunctionComponent<ItemBadgeProps> = ({ icon, ...props }) => (
+const ItemBadge: FunctionComponent<ItemBadgeProps> = ({
+  icon,
+  title,
+  ...props
+}) => (
   <Badge
     leftSection={<FontAwesomeIcon icon={icon}></FontAwesomeIcon>}
     radius="sm"
     color="dark"
     size="sm"
     style={{ textTransform: "none" }}
+    aria-label={title}
     {...props}
   ></Badge>
 );