diff --git a/web/chat/message-tooltip.css b/web/chat/message-tooltip.css
--- a/web/chat/message-tooltip.css
+++ b/web/chat/message-tooltip.css
@@ -1,18 +1,9 @@
-div.container {
-  display: flex;
-  flex-direction: row;
-}
-
-div.containerLeftAlign,
-div.containerCenterAlign {
-  flex-direction: row-reverse;
-}
-
 div.messageTooltipContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: var(--s-font-14);
+  padding: 8px 0;
 }
 
 div.messageActionContainer {
@@ -71,3 +62,7 @@
 div.rightTooltipAlign {
   align-items: flex-end;
 }
+
+div.emojiKeyboard {
+  position: absolute;
+}
diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js
--- a/web/chat/message-tooltip.react.js
+++ b/web/chat/message-tooltip.react.js
@@ -15,15 +15,23 @@
   tooltipStyle,
 } from './chat-constants.js';
 import css from './message-tooltip.css';
-import { useSendReaction } from './reaction-message-utils.js';
+import {
+  useSendReaction,
+  getEmojiKeyboardPosition,
+} from './reaction-message-utils.js';
 import { useTooltipContext } from './tooltip-provider.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { type MessageTooltipAction } from '../utils/tooltip-utils.js';
+import type {
+  MessageTooltipAction,
+  TooltipSize,
+  TooltipPositionStyle,
+} from '../utils/tooltip-utils.js';
 
 type MessageTooltipProps = {
   +actions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
-  +alignment?: 'left' | 'center' | 'right',
+  +tooltipPositionStyle: TooltipPositionStyle,
+  +tooltipSize: TooltipSize,
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
@@ -31,16 +39,29 @@
   const {
     actions,
     messageTimestamp,
-    alignment = 'left',
+    tooltipPositionStyle,
+    tooltipSize,
     item,
     threadInfo,
   } = props;
   const { messageInfo, reactions } = item;
 
+  const { alignment = 'left' } = tooltipPositionStyle;
+
   const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>();
 
   const { renderEmojiKeyboard } = useTooltipContext();
 
+  const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null);
+
+  const emojiKeyboardRef = React.useRef();
+
+  React.useEffect(() => {
+    if (emojiKeyboardRef.current) {
+      setEmojiKeyboardNode(emojiKeyboardRef.current);
+    }
+  }, [renderEmojiKeyboard]);
+
   const messageActionButtonsContainerClassName = classNames(
     css.messageActionContainer,
     css.messageActionButtons,
@@ -113,6 +134,27 @@
     );
   }, [messageTimestamp, messageTooltipLabelStyle]);
 
+  const emojiKeyboardPosition = React.useMemo(
+    () =>
+      getEmojiKeyboardPosition(
+        emojiKeyboardNode,
+        tooltipPositionStyle,
+        tooltipSize,
+      ),
+    [emojiKeyboardNode, tooltipPositionStyle, tooltipSize],
+  );
+
+  const emojiKeyboardPositionStyle = React.useMemo(() => {
+    if (!emojiKeyboardPosition) {
+      return null;
+    }
+
+    return {
+      bottom: emojiKeyboardPosition.bottom,
+      left: emojiKeyboardPosition.left,
+    };
+  }, [emojiKeyboardPosition]);
+
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
@@ -133,18 +175,21 @@
     if (!renderEmojiKeyboard) {
       return null;
     }
-    return <Picker data={data} onEmojiSelect={onEmojiSelect} />;
-  }, [onEmojiSelect, renderEmojiKeyboard]);
+
+    return (
+      <div
+        ref={emojiKeyboardRef}
+        style={emojiKeyboardPositionStyle}
+        className={css.emojiKeyboard}
+      >
+        <Picker data={data} onEmojiSelect={onEmojiSelect} />
+      </div>
+    );
+  }, [emojiKeyboardPositionStyle, onEmojiSelect, renderEmojiKeyboard]);
 
   const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
 
   const containerClassName = classNames({
-    [css.container]: true,
-    [css.containerLeftAlign]: alignment === 'left',
-    [css.containerCenterAlign]: alignment === 'center',
-  });
-
-  const messageTooltipContainerClassNames = classNames({
     [css.messageTooltipContainer]: true,
     [css.leftTooltipAlign]: alignment === 'left',
     [css.centerTooltipAlign]: alignment === 'center',
@@ -152,17 +197,14 @@
   });
 
   return (
-    <div className={containerClassName}>
+    <>
       {emojiKeyboard}
-      <div
-        className={messageTooltipContainerClassNames}
-        style={messageTooltipContainerStyle}
-      >
+      <div className={containerClassName} style={messageTooltipContainerStyle}>
         <div style={messageTooltipTopLabelStyle}>{tooltipLabel}</div>
         {tooltipButtons}
         {tooltipTimestamp}
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -548,13 +548,12 @@
     tooltipSize,
   });
 
-  const { alignment } = tooltipPositionStyle;
-
   const tooltip = (
     <MessageTooltip
       actions={tooltipActions}
       messageTimestamp={messageTimestamp}
-      alignment={alignment}
+      tooltipPositionStyle={tooltipPositionStyle}
+      tooltipSize={tooltipSize}
       item={item}
       threadInfo={threadInfo}
     />