diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css
new file mode 100644
--- /dev/null
+++ b/web/chat/mention-suggestion-tooltip.css
@@ -0,0 +1,49 @@
+.suggestionsContainer {
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: 296px;
+  max-height: 268px;
+  padding: 8px;
+
+  background: var(--typeahead-overlay-dark);
+
+  border: 1px solid var(--typeahead-overlay-light);
+  box-shadow: 0px 1px 2px var(--typeahead-overlay-shadow-1),
+    0px 4px 12px var(--typeahead-overlay-shadow-2);
+  border-radius: 8px;
+}
+
+.suggestion {
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+
+  width: 280px;
+  height: 40px;
+
+  background: var(--typeahead-overlay-dark);
+  border-radius: 4px;
+
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+
+  color: var(--typeahead-overlay-text);
+}
+
+.suggestion:hover {
+  background-color: var(--typeahead-overlay-light);
+}
+
+.suggestionsContainerOverflow {
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -0,0 +1,64 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import css from './mention-suggestion-tooltip.css';
+
+export type MentionSuggestionTooltipAction = {
+  +key: string,
+  +onClick: (SyntheticEvent<HTMLDivElement>) => void,
+  +actionButtonContent: React.Node,
+};
+
+export type TooltipPosition = {
+  +top: number,
+  +left: number,
+};
+export type MentionSuggestionTooltipProps = {
+  +actions: $ReadOnlyArray<MentionSuggestionTooltipAction>,
+  +tooltipPosition: TooltipPosition,
+};
+
+function MentionSuggestionTooltip(
+  props: MentionSuggestionTooltipProps,
+): React.Node {
+  const { actions, tooltipPosition } = props;
+
+  const suggestionsContainerClassNames = classNames({
+    [css.suggestionsContainer]: true,
+    [css.suggestionsContainerOverflow]: actions.length > 6,
+  });
+
+  const tooltipPositionStyle = React.useMemo(
+    () => ({
+      position: 'absolute',
+      top: tooltipPosition.top,
+      left: tooltipPosition.left,
+    }),
+    [tooltipPosition],
+  );
+
+  const tooltipButtons = React.useMemo(() => {
+    return actions.map(({ key, onClick, actionButtonContent }) => (
+      <div key={key} onClick={onClick} className={css.suggestion}>
+        @{actionButtonContent}
+      </div>
+    ));
+  }, [actions]);
+
+  if (!actions || actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={suggestionsContainerClassNames}
+      style={tooltipPositionStyle}
+    >
+      {tooltipButtons}
+    </div>
+  );
+}
+
+export default MentionSuggestionTooltip;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -181,6 +181,11 @@
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
+  --typeahead-overlay-light: var(--shades-black-80);
+  --typeahead-overlay-dark: var(--shades-black-90);
+  --typeahead-overlay-text: var(--shades-white-100);
+  --typeahead-overlay-shadow-1: rgba(0, 0, 0, 0.25);
+  --typeahead-overlay-shadow-2: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--shades-black-80);
   --spoiler-background-color: var(--shades-black-80);
 }