diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css
index 3e1a515ad..5ff074c96 100644
--- a/web/chat/mention-suggestion-tooltip.css
+++ b/web/chat/mention-suggestion-tooltip.css
@@ -1,58 +1,67 @@
 .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);
 }
+
+.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
index a8a7096fa..195699f6e 100644
--- a/web/chat/mention-suggestion-tooltip.react.js
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -1,113 +1,126 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import SearchIndex from 'lib/shared/search-index';
 import { threadOtherMembers } from 'lib/shared/thread-utils';
 import type { RelativeMemberInfo } from 'lib/types/thread-types';
 
 import Button from '../components/button.react';
 import type { InputState } from '../input/input-state';
 import { type TypeaheadMatchedStrings } from './chat-input-bar.react';
 import css from './mention-suggestion-tooltip.css';
 import {
   getTypeaheadTooltipActions,
   getTypeaheadTooltipPosition,
   getTypeaheadUserSuggestions,
 } from './mention-utils';
 
 export type MentionSuggestionTooltipProps = {
   +inputState: InputState,
   +textarea: HTMLTextAreaElement,
   +userSearchIndex: SearchIndex,
   +threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
   +viewerID: ?string,
   +matchedStrings: TypeaheadMatchedStrings,
 };
 
 function MentionSuggestionTooltip(
   props: MentionSuggestionTooltipProps,
 ): React.Node {
   const {
     inputState,
     textarea,
     userSearchIndex,
     threadMembers,
     viewerID,
     matchedStrings,
   } = props;
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsVisible(true);
+
+    return () => setIsVisible(false);
+  }, [setIsVisible]);
 
   const {
     entireText: matchedText,
     textBeforeAtSymbol: matchedTextBeforeAtSymbol,
     usernamePrefix: matchedUsernamePrefix,
   } = matchedStrings;
 
   const typedPrefix = matchedUsernamePrefix ?? '';
 
   const suggestedUsers = React.useMemo(
     () =>
       getTypeaheadUserSuggestions(
         userSearchIndex,
         threadOtherMembers(threadMembers, viewerID),
         typedPrefix,
       ),
     [userSearchIndex, threadMembers, viewerID, typedPrefix],
   );
 
   const actions = React.useMemo(
     () =>
       getTypeaheadTooltipActions(
         inputState,
         textarea,
         suggestedUsers,
         matchedTextBeforeAtSymbol,
         matchedText,
       ),
     [
       inputState,
       textarea,
       suggestedUsers,
       matchedTextBeforeAtSymbol,
       matchedText,
     ],
   );
 
   const tooltipPosition = React.useMemo(
     () =>
       getTypeaheadTooltipPosition(
         textarea,
         actions.length,
         matchedTextBeforeAtSymbol,
       ),
     [textarea, actions.length, matchedTextBeforeAtSymbol],
   );
 
   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;
   }
 
+  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>
   );
 }
 
 export default MentionSuggestionTooltip;