From fafc0619ad9929221fb67d496232234a4cbec626 Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Wed, 7 Jun 2023 11:32:54 +0200
Subject: [PATCH] add tooltip to action buttons when label is hidden because
 viewport width is below mobile breakpoint
 (Athou/commafeed-browser-extension#1)

---
 commafeed-client/src/components/ActionButtton.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/commafeed-client/src/components/ActionButtton.tsx b/commafeed-client/src/components/ActionButtton.tsx
index 8ecfb4d5..ea6431b1 100644
--- a/commafeed-client/src/components/ActionButtton.tsx
+++ b/commafeed-client/src/components/ActionButtton.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
 import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
 import { ButtonProps } from "@mantine/core/lib/Button/Button"
 import { useMediaQuery } from "@mantine/hooks"
@@ -22,9 +22,11 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
     const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
     const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
     return iconOnly ? (
-        <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
-            {props.icon}
-        </ActionIcon>
+        <Tooltip label={props.label} openDelay={500}>
+            <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
+                {props.icon}
+            </ActionIcon>
+        </Tooltip>
     ) : (
         <Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
             {props.label}