Add tooltips to message toolbox

RocketChat · Mar 4, 2024 · 71fdad0 · 71fdad0
1 parent da8b930
commit 71fdad0
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 47 deletions.
diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
@@ -10,6 +10,7 @@ import { Modal } from '../Modal';
 import { Icon } from '../Icon';
 import { Button } from '../Button';
 import { parseEmoji } from '../../lib/emoji';
+import { Tooltip } from '../Tooltip';
 
 const MessageToolboxWrapperCss = css`
   display: none;
@@ -88,30 +89,44 @@ export const MessageToolbox = ({
           {...props}
         >
           {!isThreadMessage ? (
+            <Tooltip text="Reply in thread" position="top">
+              <ActionButton
+                ghost
+                size="small"
+                icon="thread"
+                onClick={handleOpenThread(message)}
+              />
+            </Tooltip>
+          ) : null}
+          <Tooltip
+            text={
+              message.starred &&
+              message.starred.find((u) => u._id === authenticatedUserId)
+                ? 'Remove star'
+                : 'Star'
+            }
+            position="top"
+          >
             <ActionButton
               ghost
               size="small"
-              icon="thread"
-              onClick={handleOpenThread(message)}
+              icon={`${
+                message.starred &&
+                message.starred.find((u) => u._id === authenticatedUserId)
+                  ? 'star-filled'
+                  : 'star'
+              }`}
+              onClick={() => handleStarMessage(message)}
             />
-          ) : null}
-          <ActionButton
-            ghost
-            size="small"
-            icon={`${
-              message.starred &&
-              message.starred.find((u) => u._id === authenticatedUserId)
-                ? 'star-filled'
-                : 'star'
-            }`}
-            onClick={() => handleStarMessage(message)}
-          />
-          <ActionButton
-            ghost
-            size="small"
-            icon="emoji"
-            onClick={() => setEmojiOpen(true)}
-          />
+          </Tooltip>
+          <Tooltip text="Add reaction" position="top">
+            <ActionButton
+              ghost
+              size="small"
+              icon="emoji"
+              onClick={() => setEmojiOpen(true)}
+            />
+          </Tooltip>
           <Popup
             modal
             open={isEmojiOpen}
@@ -127,38 +142,46 @@ export const MessageToolbox = ({
             />
           </Popup>
           {!isThreadMessage && (
-            <ActionButton
-              ghost
-              size="small"
-              icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
-              onClick={() => handlePinMessage(message)}
-            />
-          )}
-          {message.u._id === authenticatedUserId && (
-            <>
-              <ActionButton
-                ghost={!isEditing}
-                color={isEditing ? 'secondary' : 'default'}
-                size="small"
-                icon="edit"
-                onClick={() => handleEditMessage(message)}
-              />
+            <Tooltip text={message.pinned ? 'Unpin' : 'Pin'} position="top">
               <ActionButton
                 ghost
                 size="small"
-                icon="trash"
-                color="error"
-                onClick={() => handleClickDelete(message)}
+                icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
+                onClick={() => handlePinMessage(message)}
               />
+            </Tooltip>
+          )}
+          {message.u._id === authenticatedUserId && (
+            <>
+              <Tooltip text="Edit" position="top">
+                <ActionButton
+                  ghost={!isEditing}
+                  color={isEditing ? 'secondary' : 'default'}
+                  size="small"
+                  icon="edit"
+                  onClick={() => handleEditMessage(message)}
+                />
+              </Tooltip>
+              <Tooltip text="Delete" position="top">
+                <ActionButton
+                  ghost
+                  size="small"
+                  icon="trash"
+                  color="error"
+                  onClick={() => handleClickDelete(message)}
+                />
+              </Tooltip>
             </>
           )}
-          <ActionButton
-            ghost
-            size="small"
-            icon="report"
-            color="error"
-            onClick={() => handlerReportMessage(message)}
-          />
+          <Tooltip text="Report" position="top">
+            <ActionButton
+              ghost
+              size="small"
+              icon="report"
+              color="error"
+              onClick={() => handlerReportMessage(message)}
+            />
+          </Tooltip>
         </Box>
       </Box>
       {showDeleteModal && (

diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
@@ -31,7 +31,7 @@ const Tooltip = ({ children, text, position }) => {
   // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
 
   if (position === 'top') {
-    tooltipStyle.top = '-100%';
+    tooltipStyle.top = 'calc(-100% - 10px)'; // avoid overlaying the element
     tooltipArrowStyle.top = '100%';
     tooltipArrowStyle.transform = 'translateX(-50%)';
   } else if (position === 'bottom') {