diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index febe18f30c7d..b71b379211d9 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -7,12 +7,19 @@ import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import {PersonalDetails} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
 import Text from './Text';
 import Tooltip from './Tooltip';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
+// TODO: once `src/components/participantPropTypes.js` is migrated to TS, this type should be moved there
+type Participant = Pick<
+    PersonalDetails,
+    'accountID' | 'avatar' | 'displayName' | 'firstName' | 'lastName' | 'localCurrencyCode' | 'login' | 'payPalMeAddress' | 'phoneNumber' | 'pronouns' | 'timezone' | 'validated'
+>;
+
 type MultipleAvatarsProps = {
     /** Array of avatar URLs or icons */
     icons: Icon[];
@@ -52,6 +59,9 @@ type MultipleAvatarsProps = {
 
     /** Prop to limit the amount of avatars displayed horizontally */
     maxAvatarsInRow?: number;
+
+    /** List of participants */
+    participants: Participant[];
 };
 
 type AvatarStyles = {
@@ -92,6 +102,7 @@ function MultipleAvatars({
     shouldShowTooltip = true,
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
+    participants = [],
 }: MultipleAvatarsProps) {
     let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
@@ -109,6 +120,17 @@ function MultipleAvatars({
         return CONST.AVATAR_SIZE.SMALLER;
     }, [isFocusMode, size]);
 
+    const participantsList = useMemo(
+        () =>
+            participants.reduce<Record<number, Participant>>((all, participant) => {
+                const items = all;
+                items[participant.accountID] = participant;
+
+                return items;
+            }, {}),
+        [participants],
+    );
+
     const avatarRows = useMemo(() => {
         // If we're not displaying avatars in rows or the number of icons is less than or equal to the max avatars in a row, return a single row
         if (!shouldDisplayAvatarsInRows || icons.length <= maxAvatarsInRow) {
@@ -133,7 +155,7 @@ function MultipleAvatars({
     if (icons.length === 1 && !shouldStackHorizontally) {
         return (
             <UserDetailsTooltip
-                accountID={icons[0].id}
+                user={participantsList[Number(icons[0].id)]}
                 icon={icons[0]}
                 fallbackUserDetails={{
                     displayName: icons[0].name,
@@ -175,7 +197,7 @@ function MultipleAvatars({
                         {[...avatars].splice(0, maxAvatarsInRow).map((icon, index) => (
                             <UserDetailsTooltip
                                 key={`stackedAvatars-${icon.id}`}
-                                accountID={icon.id}
+                                user={participantsList[Number(icon.id)]}
                                 icon={icon}
                                 fallbackUserDetails={{
                                     displayName: icon.name,
@@ -246,7 +268,7 @@ function MultipleAvatars({
                 <View style={avatarContainerStyles}>
                     <View style={[singleAvatarStyle, icons[0].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[0].type) : {}]}>
                         <UserDetailsTooltip
-                            accountID={icons[0].id}
+                            user={participantsList[Number(icons[0].id)]}
                             icon={icons[0]}
                             fallbackUserDetails={{
                                 displayName: icons[0].name,
@@ -268,7 +290,7 @@ function MultipleAvatars({
                         <View style={[secondAvatarStyles, secondAvatarStyle, icons[1].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[1].type) : {}]}>
                             {icons.length === 2 ? (
                                 <UserDetailsTooltip
-                                    accountID={icons[1].id}
+                                    user={participantsList[Number(icons[1].id)]}
                                     icon={icons[1]}
                                     fallbackUserDetails={{
                                         displayName: icons[1].name,
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index e1c554dc1d37..818b7907a383 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -208,9 +208,11 @@ function OptionRow(props) {
                                             secondaryAvatar={props.option.icons[1]}
                                             backgroundColor={hovered ? hoveredBackgroundColor : subscriptColor}
                                             size={defaultSubscriptSize}
+                                            participants={props.option.participantsList}
                                         />
                                     ) : (
                                         <MultipleAvatars
+                                            participants={props.option.participantsList}
                                             icons={props.option.icons}
                                             size={CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(hovered ? hoveredBackgroundColor : subscriptColor)]}
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index ab9f0dec8e57..66494a5f22b0 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -6,9 +6,16 @@ import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import {PersonalDetails} from '@src/types/onyx';
 import Avatar from './Avatar';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
+// TODO: once `src/components/participantPropTypes.js` is migrated to TS, this type should be moved there
+type Participant = Pick<
+    PersonalDetails,
+    'accountID' | 'avatar' | 'displayName' | 'firstName' | 'lastName' | 'localCurrencyCode' | 'login' | 'payPalMeAddress' | 'phoneNumber' | 'pronouns' | 'timezone' | 'validated'
+>;
+
 type SubAvatar = {
     /** Avatar source to display */
     source?: AvatarSource;
@@ -44,9 +51,20 @@ type SubscriptAvatarProps = {
 
     /** Whether to show the tooltip */
     showTooltip?: boolean;
+
+    /** List of the participants of the chat */
+    participants: Participant[];
 };
 
-function SubscriptAvatar({mainAvatar = {}, secondaryAvatar = {}, size = CONST.AVATAR_SIZE.DEFAULT, backgroundColor, noMargin = false, showTooltip = true}: SubscriptAvatarProps) {
+function SubscriptAvatar({
+    mainAvatar = {},
+    secondaryAvatar = {},
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    backgroundColor,
+    noMargin = false,
+    showTooltip = true,
+    participants = [],
+}: SubscriptAvatarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const isSmall = size === CONST.AVATAR_SIZE.SMALL;
@@ -57,7 +75,7 @@ function SubscriptAvatar({mainAvatar = {}, secondaryAvatar = {}, size = CONST.AV
         <View style={[containerStyle, noMargin ? styles.mr0 : {}]}>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={mainAvatar.id ?? -1}
+                user={participants.find((participant) => participant.accountID === mainAvatar.id)}
                 icon={mainAvatar}
             >
                 <View>
@@ -73,7 +91,7 @@ function SubscriptAvatar({mainAvatar = {}, secondaryAvatar = {}, size = CONST.AV
             </UserDetailsTooltip>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={secondaryAvatar.id ?? -1}
+                user={participants.find((participant) => participant.accountID === secondaryAvatar.id)}
                 icon={secondaryAvatar}
             >
                 <View
diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
index 508bc6f8426c..a2cdf9b92263 100644
--- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
+++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
@@ -18,12 +18,11 @@ function BaseUserDetailsTooltip(props) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const personalDetails = usePersonalDetails();
-
-    const userDetails = lodashGet(personalDetails, props.accountID, props.fallbackUserDetails);
-    let userDisplayName = ReportUtils.getDisplayNameForParticipant(props.accountID);
+    const userDetails = props.user || props.fallbackUserDetails;
+    let userDisplayName = userDetails.displayName ? userDetails.displayName.trim() : '';
     let userLogin = (userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : '';
     let userAvatar = userDetails.avatar;
-    let userAccountID = props.accountID;
+    let userAccountID = props.user ? props.user.accountID : props.accountID;
 
     // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
     // the Copilot feature is implemented.
diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
index 538e9ad5348f..e1021271a5d7 100644
--- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
+++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
 import avatarPropTypes from '@components/avatarPropTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
+import participantPropTypes from '@components/participantPropTypes';
 
 const propTypes = {
-    /** User's Account ID */
-    accountID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     /** Fallback User Details object used if no accountID */
     fallbackUserDetails: PropTypes.shape({
         /** Avatar URL */
@@ -20,8 +18,6 @@ const propTypes = {
     icon: avatarPropTypes,
     /** Component that displays the tooltip */
     children: PropTypes.node.isRequired,
-    /** List of personalDetails (keyed by accountID)  */
-    personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
 
     /** The accountID of the copilot who took this action on behalf of the user */
     delegateAccountID: PropTypes.number,
@@ -29,12 +25,15 @@ const propTypes = {
     /** Any additional amount to manually adjust the horizontal position of the tooltip.
      A positive value shifts the tooltip to the right, and a negative value shifts it to the left. */
     shiftHorizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+
+    /** User object containing the details needed to display in a tooltip */
+    user: participantPropTypes,
 };
 
 const defaultProps = {
     accountID: '',
     fallbackUserDetails: {displayName: '', login: '', avatar: '', type: ''},
-    personalDetailsList: {},
+    user: {},
     delegateAccountID: 0,
     icon: undefined,
     shiftHorizontal: 0,