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
@@ -11,19 +11,24 @@
 
 import { useSelector } from '../redux/redux-utils';
 import { type MessageTooltipAction } from '../utils/tooltip-utils';
+import type { TooltipSize, TooltipPositionStyle } from '../utils/tooltip-utils';
 import {
   tooltipButtonStyle,
   tooltipLabelStyle,
   tooltipStyle,
 } from './chat-constants';
 import css from './message-tooltip.css';
-import { useSendReaction } from './reaction-message-utils';
+import {
+  useSendReaction,
+  getEmojiKeyboardPosition,
+} from './reaction-message-utils';
 import { useTooltipContext } from './tooltip-provider';
 
 type MessageTooltipProps = {
   +actions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
-  +alignment?: 'left' | 'center' | 'right',
+  tooltipPositionStyle: TooltipPositionStyle,
+  +tooltipSize: TooltipSize,
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
@@ -31,12 +36,15 @@
   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();
@@ -113,6 +121,19 @@
     );
   }, [messageTimestamp, messageTooltipLabelStyle]);
 
+  const emojiKeyboardPosition = React.useMemo(
+    () => getEmojiKeyboardPosition(tooltipPositionStyle, tooltipSize),
+    [tooltipPositionStyle, tooltipSize],
+  );
+
+  const emojiKeyboardPositionStyle = React.useMemo(
+    () => ({
+      bottom: emojiKeyboardPosition.bottom,
+      left: emojiKeyboardPosition.left,
+    }),
+    [emojiKeyboardPosition],
+  );
+
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
@@ -133,16 +154,15 @@
     if (!renderEmojiKeyboard) {
       return null;
     }
-    return <Picker data={data} onEmojiSelect={onEmojiSelect} />;
-  }, [onEmojiSelect, renderEmojiKeyboard]);
 
-  const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
+    return (
+      <div style={emojiKeyboardPositionStyle} className={css.emojiKeyboard}>
+        <Picker data={data} onEmojiSelect={onEmojiSelect} />
+      </div>
+    );
+  }, [emojiKeyboardPositionStyle, onEmojiSelect, renderEmojiKeyboard]);
 
-  const containerClassName = classNames({
-    [css.container]: true,
-    [css.containerLeftAlign]: alignment === 'left',
-    [css.containerCenterAlign]: alignment === 'center',
-  });
+  const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
 
   const messageTooltipContainerClassNames = classNames({
     [css.messageTooltipContainer]: true,
@@ -152,7 +172,7 @@
   });
 
   return (
-    <div className={containerClassName}>
+    <div>
       {emojiKeyboard}
       <div
         className={messageTooltipContainerClassNames}
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
@@ -553,13 +553,12 @@
     tooltipSize,
   });
 
-  const { alignment } = tooltipPositionStyle;
-
   const tooltip = (
     <MessageTooltip
       actions={tooltipActions}
       messageTimestamp={messageTimestamp}
-      alignment={alignment}
+      tooltipPositionStyle={tooltipPositionStyle}
+      tooltipSize={tooltipSize}
       item={item}
       threadInfo={threadInfo}
     />