diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css
--- a/web/chat/mention-suggestion-tooltip.css
+++ b/web/chat/mention-suggestion-tooltip.css
@@ -56,3 +56,12 @@
 .suggestion:hover {
   background-color: var(--typeahead-overlay-light);
 }
+
+.notVisible {
+  opacity: 0;
+}
+
+.visible {
+  opacity: 1;
+  transition: opacity 100ms ease-in;
+}
diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
--- a/web/chat/mention-suggestion-tooltip.react.js
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import SearchIndex from 'lib/shared/search-index';
@@ -35,6 +36,13 @@
     viewerID,
     matches,
   } = props;
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsVisible(true);
+
+    return () => setIsVisible(false);
+  }, [setIsVisible]);
 
   const wholeMatch = matches[0]; //text before @ + @ + username prefix
   const matchedTextBeforeAtSymbol = matches[1]; // text before @
@@ -100,8 +108,13 @@
     return null;
   }
 
+  const overlayClasses = classNames(css.suggestionsContainer, {
+    [css.notVisible]: !isVisible,
+    [css.visible]: isVisible,
+  });
+
   return (
-    <div className={css.suggestionsContainer} style={tooltipPositionStyle}>
+    <div className={overlayClasses} style={tooltipPositionStyle}>
       {tooltipButtons}
     </div>
   );