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,3 +1,13 @@
+div.container {
+  display: flex;
+  flex-direction: row;
+}
+
+div.containerLeftAlign,
+div.containerCenterAlign {
+  flex-direction: row-reverse;
+}
+
 div.messageTooltipContainer {
   display: flex;
   flex-direction: column;
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
@@ -1,8 +1,15 @@
 // @flow
 
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
 import classNames from 'classnames';
 import * as React from 'react';
 
+import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
+import { localIDPrefix } from 'lib/shared/message-utils';
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import { useSelector } from '../redux/redux-utils';
 import { type MessageTooltipAction } from '../utils/tooltip-utils';
 import {
   tooltipButtonStyle,
@@ -10,15 +17,30 @@
   tooltipStyle,
 } from './chat-constants';
 import css from './message-tooltip.css';
+import { useSendReaction } from './reaction-message-utils';
+import { useTooltipContext } from './tooltip-provider';
 
 type MessageTooltipProps = {
   +actions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
   +alignment?: 'left' | 'center' | 'right',
+  +item: ChatMessageInfoItem,
+  +threadInfo: ThreadInfo,
 };
 function MessageTooltip(props: MessageTooltipProps): React.Node {
-  const { actions, messageTimestamp, alignment = 'left' } = props;
+  const {
+    actions,
+    messageTimestamp,
+    alignment = 'left',
+    item,
+    threadInfo,
+  } = props;
+  const { messageInfo, reactions } = item;
+
   const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>();
+
+  const { renderEmojiKeyboard } = useTooltipContext();
+
   const messageActionButtonsContainerClassName = classNames(
     css.messageActionContainer,
     css.messageActionButtons,
@@ -91,19 +113,55 @@
     );
   }, [messageTimestamp, messageTooltipLabelStyle]);
 
+  const nextLocalID = useSelector(state => state.nextLocalID);
+  const localID = `${localIDPrefix}${nextLocalID}`;
+
+  const sendReaction = useSendReaction(messageInfo.id, localID, threadInfo.id);
+
+  const onEmojiSelect = React.useCallback(
+    emoji => {
+      const reactionInput = emoji.native;
+      const viewerReacted = !!reactions.get(reactionInput)?.viewerReacted;
+      const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
+
+      sendReaction(reactionInput, action);
+    },
+    [sendReaction, reactions],
+  );
+
+  const emojiKeyboard = React.useMemo(() => {
+    if (!renderEmojiKeyboard) {
+      return null;
+    }
+    return <Picker data={data} onEmojiSelect={onEmojiSelect} />;
+  }, [onEmojiSelect, renderEmojiKeyboard]);
+
   const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
 
-  const containerClassNames = classNames(css.messageTooltipContainer, {
+  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',
     [css.rightTooltipAlign]: alignment === 'right',
   });
 
   return (
-    <div className={containerClassNames} style={messageTooltipContainerStyle}>
-      <div style={messageTooltipTopLabelStyle}>{tooltipLabel}</div>
-      {tooltipButtons}
-      {tooltipTimestamp}
+    <div className={containerClassName}>
+      {emojiKeyboard}
+      <div
+        className={messageTooltipContainerClassNames}
+        style={messageTooltipContainerStyle}
+      >
+        <div style={messageTooltipTopLabelStyle}>{tooltipLabel}</div>
+        {tooltipButtons}
+        {tooltipTimestamp}
+      </div>
     </div>
   );
 }
diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js
--- a/web/chat/reaction-message-utils.js
+++ b/web/chat/reaction-message-utils.js
@@ -19,7 +19,7 @@
 import Alert from '../modals/alert.react';
 import { useSelector } from '../redux/redux-utils';
 
-function useOnClickReact(
+function useSendReaction(
   messageID: ?string,
   localID: string,
   threadID: string,
@@ -101,4 +101,4 @@
   );
 }
 
-export { useOnClickReact };
+export { useSendReaction };
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
@@ -5,7 +5,7 @@
 import * as React from 'react';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
-import { localIDPrefix, createMessageReply } from 'lib/shared/message-utils';
+import { createMessageReply } from 'lib/shared/message-utils';
 import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils';
 import {
   threadHasPermission,
@@ -21,18 +21,16 @@
   tooltipLabelStyle,
   tooltipStyle,
 } from '../chat/chat-constants';
-import MessageLikeTooltipButton from '../chat/message-like-tooltip-button.react';
 import MessageTooltip from '../chat/message-tooltip.react';
 import type { PositionInfo } from '../chat/position-types';
-import { useOnClickReact } from '../chat/reaction-message-utils';
 import { useTooltipContext } from '../chat/tooltip-provider';
 import CommIcon from '../CommIcon.react';
 import { InputStateContext } from '../input/input-state';
-import { useSelector } from '../redux/redux-utils';
 import {
   useOnClickPendingSidebar,
   useOnClickThread,
 } from '../selectors/thread-selectors';
+import SWMansionIcon from '../SWMansionIcon.react';
 import { calculateMaxTextWidth } from '../utils/text-utils';
 
 export const tooltipPositions = Object.freeze({
@@ -457,21 +455,9 @@
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
-  const { messageInfo, reactions } = item;
-
-  const nextLocalID = useSelector(state => state.nextLocalID);
-  const localID = `${localIDPrefix}${nextLocalID}`;
-
-  const reactionInput = '👍';
-  const viewerReacted = !!reactions.get(reactionInput)?.viewerReacted;
-  const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
-
-  const onClickReact = useOnClickReact(messageInfo.id, localID, threadInfo.id);
+  const { messageInfo } = item;
 
-  const onClick = React.useCallback(() => onClickReact(reactionInput, action), [
-    action,
-    onClickReact,
-  ]);
+  const { setRenderEmojiKeyboard } = useTooltipContext();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
@@ -483,16 +469,21 @@
       return null;
     }
 
-    const buttonContent = (
-      <MessageLikeTooltipButton viewerReacted={viewerReacted} />
-    );
+    const buttonContent = <SWMansionIcon icon="emote-smile" size={18} />;
+
+    const onClickReact = () => {
+      if (!setRenderEmojiKeyboard) {
+        return;
+      }
+      setRenderEmojiKeyboard(true);
+    };
 
     return {
       actionButtonContent: buttonContent,
-      onClick,
-      label: viewerReacted ? 'Unlike' : 'Like',
+      onClick: onClickReact,
+      label: 'React',
     };
-  }, [canCreateReactionFromMessage, onClick, viewerReacted]);
+  }, [canCreateReactionFromMessage, setRenderEmojiKeyboard]);
 }
 
 function useMessageTooltipActions(
@@ -527,6 +518,8 @@
   +containsInlineEngagement: boolean,
   +tooltipActions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
+  +item: ChatMessageInfoItem,
+  +threadInfo: ThreadInfo,
 };
 
 function createTooltip(params: CreateTooltipParams) {
@@ -537,6 +530,8 @@
     containsInlineEngagement,
     tooltipActions,
     messageTimestamp,
+    item,
+    threadInfo,
   } = params;
   if (!tooltipMessagePosition) {
     return;
@@ -565,6 +560,8 @@
       actions={tooltipActions}
       messageTimestamp={messageTimestamp}
       alignment={alignment}
+      item={item}
+      threadInfo={threadInfo}
     />
   );
   return { tooltip, tooltipPositionStyle };
@@ -621,6 +618,8 @@
         containsInlineEngagement,
         tooltipActions,
         messageTimestamp,
+        item,
+        threadInfo,
       });
       if (!tooltipResult) {
         return;
@@ -640,8 +639,10 @@
     [
       availablePositions,
       containsInlineEngagement,
+      item,
       messageTimestamp,
       renderTooltip,
+      threadInfo,
       tooltipActions,
       tooltipMessagePosition,
       tooltipSize,
@@ -660,6 +661,8 @@
       containsInlineEngagement,
       tooltipActions,
       messageTimestamp,
+      item,
+      threadInfo,
     });
     if (!tooltipResult) {
       return;
@@ -669,7 +672,9 @@
   }, [
     availablePositions,
     containsInlineEngagement,
+    item,
     messageTimestamp,
+    threadInfo,
     tooltipActions,
     tooltipMessagePosition,
     tooltipSize,