diff --git a/web/chat/chat-constants.js b/web/chat/chat-constants.js
index 4328ced8d..625eeaab7 100644
--- a/web/chat/chat-constants.js
+++ b/web/chat/chat-constants.js
@@ -1,55 +1,71 @@
 // @flow
 
 import { messageKey } from 'lib/shared/message-utils.js';
 import type { MessageInfo } from 'lib/types/message-types.js';
 
 import type { ComposedMessageID } from './composed-message.react.js';
 
 export const tooltipStyle = {
   paddingLeft: 5,
   paddingRight: 5,
   rowGap: 3,
 };
 
 export const tooltipLabelStyle = {
   padding: 6,
   height: 20,
 };
 export const tooltipButtonStyle = {
   paddingLeft: 6,
   paddingRight: 6,
   width: 30,
   height: 38,
 };
 
+export const reactionTooltipStyle = {
+  paddingTop: 8,
+  paddingBottom: 8,
+  paddingLeft: 12,
+  paddingRight: 12,
+  rowGap: 4,
+  maxWidth: 136,
+  maxHeight: 162,
+};
+
+export const reactionSeeMoreLabel = 'See more';
+
+export const reactionSeeMoreLabelStyle = {
+  height: 18,
+};
+
 export const typeaheadStyle = {
   tooltipWidth: 296,
   tooltipMaxHeight: 268,
   tooltipVerticalPadding: 16,
   tooltipLeftOffset: 16,
   tooltipTopOffset: 4,
   rowHeight: 40,
 };
 
 export const getComposedMessageID = (
   messageInfo: MessageInfo,
 ): ComposedMessageID => {
   return `ComposedMessageBox-${messageKey(messageInfo)}`;
 };
 
 export const defaultMaxTextAreaHeight = 150;
 
 // The editBoxBottomRowHeight is the height of the bottom row in the edit box
 // which is the height of the buttons in the bottom row.
 export const editBoxBottomRowHeight = 22;
 
 // The editBoxHeight is a height of the all elements of the edit box
 // except for the textarea.
 // It consists of:
 // - 2 * 10px:  .editMessage padding (edit-text-message.css)
 // - 10px:      .bottomRow padding between the bottom row buttons
 //                and the textarea (edit-text-message.css)
 // - 2 * 8px:   .inputBarTextInput padding (chat-input-bar.css)
 // - 22px:      height of the bottom row in the edit box (explained above)
 // - textarea height which is NOT included here
 export const editBoxHeight: number = 3 * 10 + 2 * 8 + editBoxBottomRowHeight;
diff --git a/web/chat/reaction-tooltip.css b/web/chat/reaction-tooltip.css
new file mode 100644
index 000000000..101183251
--- /dev/null
+++ b/web/chat/reaction-tooltip.css
@@ -0,0 +1,28 @@
+div.container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--message-action-tooltip-bg);
+  border-radius: 8px;
+  margin: 4px 0;
+}
+
+div.container:hover {
+  cursor: pointer;
+}
+
+p.usernameText {
+  font-size: var(--s-font-14);
+  color: var(--tool-tip-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+p.seeMoreText {
+  font-size: var(--xs-font-12);
+  color: var(--purple-link);
+  white-space: nowrap;
+}
+
+div.container:hover p.seeMoreText {
+  text-decoration: underline;
+}
diff --git a/web/chat/reaction-tooltip.react.js b/web/chat/reaction-tooltip.react.js
new file mode 100644
index 000000000..f2a65df27
--- /dev/null
+++ b/web/chat/reaction-tooltip.react.js
@@ -0,0 +1,75 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { ReactionInfo } from 'lib/selectors/chat-selectors';
+
+import {
+  tooltipLabelStyle,
+  reactionTooltipStyle,
+  reactionSeeMoreLabel,
+  reactionSeeMoreLabelStyle,
+} from './chat-constants.js';
+import css from './reaction-tooltip.css';
+import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';
+
+type Props = {
+  +reactions: ReactionInfo,
+  +reaction: string,
+};
+
+function ReactionTooltip(props: Props): React.Node {
+  const { reactions, reaction } = props;
+  const { pushModal, popModal } = useModalContext();
+
+  const onClickReactionTooltip = React.useCallback(
+    (event: SyntheticEvent<HTMLElement>) => {
+      event.preventDefault();
+
+      pushModal(
+        <MessageReactionsModal onClose={popModal} reactions={reactions} />,
+      );
+    },
+    [popModal, pushModal, reactions],
+  );
+
+  const usernames = React.useMemo(() => {
+    const { users } = reactions[reaction];
+
+    return users.map(user => (
+      <p
+        key={user.id}
+        className={css.usernameText}
+        style={{ height: tooltipLabelStyle.height }}
+      >
+        {user.username}
+      </p>
+    ));
+  }, [reaction, reactions]);
+
+  let seeMoreText;
+  if (usernames && usernames.length > 5) {
+    seeMoreText = (
+      <p
+        className={css.seeMoreText}
+        style={{ height: reactionSeeMoreLabelStyle.height }}
+      >
+        {reactionSeeMoreLabel}
+      </p>
+    );
+  }
+
+  return (
+    <div
+      className={css.container}
+      onClick={onClickReactionTooltip}
+      style={reactionTooltipStyle}
+    >
+      {usernames}
+      {seeMoreText}
+    </div>
+  );
+}
+
+export default ReactionTooltip;