From 90125f043b12cab8f99574ebcf5c322d719a7d85 Mon Sep 17 00:00:00 2001
From: Adam Spooner <adamjspooner@gmail.com>
Date: Wed, 15 Apr 2020 11:22:42 -0400
Subject: [PATCH] Add a tooltip. (#23785)

---
 shared/chat/inbox/row/small-team/bottom-line.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/shared/chat/inbox/row/small-team/bottom-line.tsx b/shared/chat/inbox/row/small-team/bottom-line.tsx
index 05f2ff295bf7..f762b4466a62 100644
--- a/shared/chat/inbox/row/small-team/bottom-line.tsx
+++ b/shared/chat/inbox/row/small-team/bottom-line.tsx
@@ -20,8 +20,8 @@ type Props = {
   draft?: string
 }
 
-const SnippetDecoration = (type: Kb.IconType, color: string) => {
-  return (
+const SnippetDecoration = (type: Kb.IconType, color: string, tooltip?: string) => {
+  const icon = (
     <Kb.Icon
       color={color}
       type={type}
@@ -29,6 +29,7 @@ const SnippetDecoration = (type: Kb.IconType, color: string) => {
       style={{alignSelf: 'flex-start'}}
     />
   )
+  return tooltip ? <Kb.WithTooltip tooltip={tooltip}>{icon}</Kb.WithTooltip> : icon
 }
 
 const BottomLine = React.memo((props: Props) => {
@@ -90,12 +91,13 @@ const BottomLine = React.memo((props: Props) => {
 
     switch (props.snippetDecoration) {
       case RPCChatTypes.SnippetDecoration.pendingMessage:
-        snippetDecoration = SnippetDecoration('iconfont-hourglass', defaultIconColor)
+        snippetDecoration = SnippetDecoration('iconfont-hourglass', defaultIconColor, 'Sending…')
         break
       case RPCChatTypes.SnippetDecoration.failedPendingMessage:
         snippetDecoration = SnippetDecoration(
           'iconfont-exclamation',
-          props.isSelected ? Styles.globalColors.white : Styles.globalColors.red
+          props.isSelected ? Styles.globalColors.white : Styles.globalColors.red,
+          'Failed to send'
         )
         break
       case RPCChatTypes.SnippetDecoration.explodingMessage: