Feat: Added Tooltip for Jump to msg button

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

@@ -6,6 +6,7 @@ import {
   Popup,
   useTheme,
   ActionButton,
+  Tooltip,
   Icon,
 } from '@embeddedchat/ui-elements';
 import { MessageDivider } from '../../Message/MessageDivider';
@@ -181,18 +182,25 @@ export const MessageAggregator = ({
                         }}
                       />
 
-                      <ActionButton
-                        square
-                        ghost
-                        onClick={() => setJumpToMessage(msg)}
-                        css={{
-                          position: 'relative',
-                          zIndex: 10,
-                          marginRight: '5px',
-                        }}
+                      <Tooltip
+                        text="Jump to message"
+                        position="left"
+                        key={msg._id}
                       >
-                        <Icon name="arrow-back" size="1.25rem" />
-                      </ActionButton>
+                        <ActionButton
+                          square
+                          ghost
+                          onClick={() => setJumpToMessage(msg)}
+                          css={{
+                            position: 'relative',
+                            zIndex: 10,
+                            marginRight: '5px',
+                            marginTop: '6px',
+                          }}
+                        >
+                          <Icon name="arrow-back" size="1.25rem" />
+                        </ActionButton>
+                      </Tooltip>
                     </Box>
                   )}
                 </React.Fragment>

packages/ui-elements/src/components/Tooltip/Tooltip.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 import { Box } from '../Box';
-import getToolTipStyles from './Tooltip.styles';
+import getTooltipStyles from './Tooltip.styles';
 import { useTheme } from '../../hooks';
 
-const Tooltip = ({ children, text, position }) => {
+const Tooltip = ({ children, text, position = 'top' }) => {
   const [isTooltipVisible, setTooltipVisible] = useState(false);
   const { theme } = useTheme();
-  const styles = getToolTipStyles(theme, position);
+  const styles = getTooltipStyles(theme, position);
 
   const handleMouseEnter = () => {
     setTooltipVisible(true);

packages/ui-elements/src/components/Tooltip/Tooltip.styles.js

@@ -1,11 +1,54 @@
 import { css } from '@emotion/react';
 
-const getTooltipStyles = (theme, position) => {
-  const styles = {
+const getTooltipStyles = (theme, position = 'top') => {
+  const positionMap = {
+    top: {
+      top: 'calc(-100% - 20px)',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      arrowTop: '100%',
+      arrowLeft: '50%',
+      arrowTransform: 'translateX(-50%) rotate(0deg)',
+    },
+    bottom: {
+      top: 'calc(100% + 10px)',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      arrowTop: 'auto',
+      arrowLeft: '50%',
+      arrowTransform: 'translateX(-50%) rotate(180deg)',
+    },
+    left: {
+      top: '50%',
+      left: 'calc(-100% - 80px)',
+      transform: 'translateY(-50%)',
+      arrowTop: '50%',
+      arrowLeft: '102%',
+      arrowTransform: 'translateY(-50%) rotate(-90deg)',
+    },
+    right: {
+      top: '50%',
+      left: 'calc(100% + 10px)',
+      transform: 'translateY(-50%)',
+      arrowTop: '50%',
+      arrowLeft: '-7px',
+      arrowTransform: 'translateY(-50%) rotate(90deg)',
+    },
+    center: {
+      top: '50%',
+      left: '64%',
+      transform: 'auto',
+      arrowTop: 'auto',
+      arrowLeft: '50%',
+      arrowTransform: 'translateX(-50%)',
+    },
+  };
+
+  const positionStyles = positionMap[position] || positionMap.top;
+
+  return {
     tooltip: css`
       position: absolute;
-      left: 64%;
-      transform: translateX(-50%);
       background-color: ${theme.invertedColors.secondary};
       color: ${theme.invertedColors.secondaryForeground};
       padding: 8.5px;
@@ -16,26 +59,25 @@ const getTooltipStyles = (theme, position) => {
       font-weight: 500;
       white-space: nowrap;
       font-family: sans-serif;
-      top: ${position === 'top' ? 'calc(-100% - 20px)' : 'calc(100% + 10px)'};
+      top: ${positionStyles.top};
+      left: ${positionStyles.left};
+      transform: ${positionStyles.transform};
     `,
+
     tooltipArrow: css`
       content: '';
       position: absolute;
-      left: 50%;
       margin-left: -4px;
       border-width: 6px;
       border-style: solid;
       border-color: ${theme.invertedColors.secondary} transparent transparent
         transparent;
-      top: ${position === 'top' ? '100%' : 'auto'};
-      bottom: ${position === 'bottom' ? '100%' : 'auto'};
-      transform: ${position === 'bottom'
-        ? 'translateX(-50%) rotate(180deg)'
-        : 'translateX(-50%)'};
+      top: ${positionStyles.arrowTop};
+      bottom: ${positionStyles.arrowTop === 'auto' ? '100%' : 'auto'};
+      left: ${positionStyles.arrowLeft};
+      transform: ${positionStyles.arrowTransform};
     `,
   };
-
-  return styles;
 };
 
 export default getTooltipStyles;