diff --git a/packages/react/src/views/Message/MessageAvatarContainer.js b/packages/react/src/views/Message/MessageAvatarContainer.js
index 016bbb0b06..8a572f127a 100644
--- a/packages/react/src/views/Message/MessageAvatarContainer.js
+++ b/packages/react/src/views/Message/MessageAvatarContainer.js
@@ -40,20 +40,22 @@ const MessageAvatarContainer = ({
   return (
     <Box css={styles.container}>
       {!sequential ? (
-        <Avatar
-          url={getUserAvatarUrl(message.u.username)}
-          alt="avatar"
-          size={
-            window.matchMedia('(max-width: 768px)').matches
-              ? message.t
-                ? '1.2em'
-                : '1.5em'
-              : message.t
-              ? '1.5em'
-              : '2.25em'
-          }
-          onClick={handleAvatarClick}
-        />
+        <Tooltip text={message.u?.name} position="top">
+          <Avatar
+            url={getUserAvatarUrl(message.u.username)}
+            alt="avatar"
+            size={
+              window.matchMedia('(max-width: 768px)').matches
+                ? message.t
+                  ? '1.2em'
+                  : '1.5em'
+                : message.t
+                ? '1.5em'
+                : '2.25em'
+            }
+            onClick={handleAvatarClick}
+          />
+        </Tooltip>
       ) : null}
       {isStarred && sequential ? (
         <Tooltip text="Starred" position="top">
diff --git a/packages/react/src/views/Message/MessageHeader.js b/packages/react/src/views/Message/MessageHeader.js
index eaaaa54cd0..f8bdee4831 100644
--- a/packages/react/src/views/Message/MessageHeader.js
+++ b/packages/react/src/views/Message/MessageHeader.js
@@ -106,18 +106,23 @@ const MessageHeader = ({
       style={styleOverrides}
     >
       {showDisplayName && showName && (
-        <Box
-          is="span"
-          css={styles.name}
-          className={appendClassNames('ec-message-header-name')}
-          style={
-            displayNameVariant === 'colorize'
-              ? { color: getDisplayNameColor(message.u.username) }
-              : null
-          }
+        <Tooltip
+          text={`@${message.u?.username || message.u?.name}`}
+          position="top"
         >
-          {message.u?.name}
-        </Box>
+          <Box
+            is="span"
+            css={styles.name}
+            className={appendClassNames('ec-message-header-name')}
+            style={
+              displayNameVariant === 'colorize'
+                ? { color: getDisplayNameColor(message.u.username) }
+                : null
+            }
+          >
+            {message.u?.name}
+          </Box>
+        </Tooltip>
       )}
       {showDisplayName && showUsername && (
         <Box
@@ -169,13 +174,18 @@ const MessageHeader = ({
       )}
 
       {isTimeStamped && (
-        <Box
-          is="span"
-          css={styles.timestamp}
-          className={appendClassNames('ec-message-header-timestamp')}
+        <Tooltip
+          text={format(new Date(message.ts), 'MMM dd, yyyy h:mm a')}
+          position="top"
         >
-          {format(new Date(message.ts), 'h:mm a')}
-        </Box>
+          <Box
+            is="span"
+            css={styles.timestamp}
+            className={appendClassNames('ec-message-header-timestamp')}
+          >
+            {format(new Date(message.ts), 'h:mm a')}
+          </Box>
+        </Tooltip>
       )}
 
       {!message.t && (