Add tooltip for comment toggle

SeedCompany · Oct 10, 2024 · 347ead7 · 347ead7
1 parent 0b4310b
commit 347ead7
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/Comments/ToggleCommentButton.tsx b/src/components/Comments/ToggleCommentButton.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/client';
 import { Comment } from '@mui/icons-material';
-import { Badge } from '@mui/material';
+import { Badge, Tooltip } from '@mui/material';
 import { Except } from 'type-fest';
 import { Feature } from '../Feature';
 import { IconButton, IconButtonProps } from '../IconButton';
@@ -24,11 +24,13 @@ export const ToggleCommentsButton = ({
 
   return (
     <Feature flag="comments" match={true}>
-      <IconButton onClick={() => toggleCommentsBar()} {...rest}>
-        <Badge badgeContent={total} color="primary">
-          <Comment />
-        </Badge>
-      </IconButton>
+      <Tooltip title={`${isCommentsBarOpen ? 'Hide' : 'Show'} Comments`}>
+        <IconButton onClick={() => toggleCommentsBar()} {...rest}>
+          <Badge badgeContent={total} color="primary">
+            <Comment />
+          </Badge>
+        </IconButton>
+      </Tooltip>
     </Feature>
   );
 };