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,58 @@
+.suggestionsContainer {
+  position: fixed;
+  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-primary),
+    0px 4px 12px var(--typeahead-overlay-shadow-secondary);
+  border-radius: 8px;
+
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.suggestion {
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  padding: 8px;
+
+  width: 280px;
+  height: 40px;
+
+  background: var(--typeahead-overlay-dark);
+  border: 0;
+  border-radius: 4px;
+
+  color: var(--typeahead-overlay-text);
+
+  font-family: var(--font-stack);
+  font-size: var(--m-font-16);
+  font-weight: var(--normal);
+
+  line-height: var(--line-height-text);
+}
+
+.suggestion span {
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.suggestion:hover {
+  background-color: var(--typeahead-overlay-light);
+}
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,55 @@
+// @flow
+
+import * as React from 'react';
+
+import Button from '../components/button.react';
+import css from './mention-suggestion-tooltip.css';
+
+export type MentionSuggestionTooltipAction = {
+  +key: string,
+  +onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
+  +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 tooltipPositionStyle = React.useMemo(
+    () => ({
+      top: tooltipPosition.top,
+      left: tooltipPosition.left,
+    }),
+    [tooltipPosition],
+  );
+
+  const tooltipButtons = React.useMemo(() => {
+    return actions.map(({ key, onClick, actionButtonContent }) => (
+      <Button key={key} onClick={onClick} className={css.suggestion}>
+        <span>@{actionButtonContent}</span>
+      </Button>
+    ));
+  }, [actions]);
+
+  if (!actions || actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={css.suggestionsContainer} 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
@@ -183,6 +183,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-primary: rgba(0, 0, 0, 0.25);
+  --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--shades-black-80);
   --spoiler-background-color: var(--shades-black-80);
 }