From 347ead7b36606cb0c7812bcb5b3f2bda1eb03b1f Mon Sep 17 00:00:00 2001
From: Carson Full <carson_full@tsco.org>
Date: Thu, 10 Oct 2024 10:44:08 -0500
Subject: [PATCH] Add tooltip for comment toggle

---
 src/components/Comments/ToggleCommentButton.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Comments/ToggleCommentButton.tsx b/src/components/Comments/ToggleCommentButton.tsx
index 0d159c77d..92be495ac 100644
--- 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>
   );
 };