diff --git a/web/chat/reaction-tooltip.css b/web/chat/reaction-tooltip.css
new file mode 100644
--- /dev/null
+++ b/web/chat/reaction-tooltip.css
@@ -0,0 +1,30 @@
+div.container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  background-color: var(--message-action-tooltip-bg);
+  padding: 8px 12px;
+  max-width: 160px;
+  border-radius: 8px;
+}
+
+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
--- /dev/null
+++ b/web/chat/reaction-tooltip.react.js
@@ -0,0 +1,54 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { ReactionInfo } from 'lib/selectors/chat-selectors';
+
+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].users;
+
+    return users.map(user => (
+      <p key={user.id} className={css.usernameText}>
+        {user.username}
+      </p>
+    ));
+  }, [reaction, reactions]);
+
+  let seeMoreText;
+  if (usernames && usernames.length > 5) {
+    seeMoreText = <p className={css.seeMoreText}>See more</p>;
+  }
+
+  return (
+    <div className={css.container} onClick={onClickReactionTooltip}>
+      {usernames}
+      {seeMoreText}
+    </div>
+  );
+}
+
+export default ReactionTooltip;