diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js
index d171b4f88448..c81a96e24755 100644
--- a/src/components/UserDetailsTooltip/index.js
+++ b/src/components/UserDetailsTooltip/index.js
@@ -1,84 +1,17 @@
-import React, {useCallback} from 'react';
-import {View, Text} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
-import _ from 'underscore';
-import Avatar from '../Avatar';
-import Tooltip from '../Tooltip';
-import {propTypes, defaultProps} from './userDetailsTooltipPropTypes';
-import styles from '../../styles/styles';
-import ONYXKEYS from '../../ONYXKEYS';
-import withLocalize from '../withLocalize';
-import compose from '../../libs/compose';
-import * as UserUtils from '../../libs/UserUtils';
-import CONST from '../../CONST';
-import * as LocalePhoneNumber from '../../libs/LocalePhoneNumber';
+import PropTypes from 'prop-types';
 
-function UserDetailsTooltip(props) {
-    const userDetails = lodashGet(props.personalDetailsList, props.accountID, 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;
+const propTypes = {
+    /** Children to wrap with Tooltip. */
+    children: PropTypes.node.isRequired,
+};
 
-    // 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.
-    if (props.delegateAccountID) {
-        const delegateUserDetails = lodashGet(props.personalDetailsList, props.delegateAccountID, {});
-        const delegateUserDisplayName = delegateUserDetails.displayName ? delegateUserDetails.displayName.trim() : '';
-        userDisplayName = `${delegateUserDisplayName} (${props.translate('reportAction.asCopilot')} ${userDisplayName})`;
-        userLogin = delegateUserDetails.login;
-        userAvatar = delegateUserDetails.avatar;
-        userAccountID = props.delegateAccountID;
-    }
-
-    let title = String(userDisplayName).trim() ? userDisplayName : '';
-    const subtitle = (userLogin || '').trim() && !_.isEqual(LocalePhoneNumber.formatPhoneNumber(userLogin || ''), userDisplayName) ? Str.removeSMSDomain(userLogin) : '';
-    if (props.icon && props.icon.type === CONST.ICON_TYPE_WORKSPACE) {
-        title = props.icon.name;
-    }
-    const renderTooltipContent = useCallback(
-        () => (
-            <View style={[styles.alignItemsCenter, styles.ph2, styles.pv2]}>
-                <View style={styles.emptyAvatar}>
-                    <Avatar
-                        containerStyles={[styles.actionAvatar]}
-                        source={props.icon ? props.icon.source : UserUtils.getAvatar(userAvatar, userAccountID)}
-                        type={props.icon ? props.icon.type : CONST.ICON_TYPE_AVATAR}
-                        name={props.icon ? props.icon.name : userLogin}
-                    />
-                </View>
-                <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{title}</Text>
-                <Text style={[styles.textMicro, styles.fontColorReactionLabel, styles.breakWord, styles.textAlignCenter]}>{subtitle}</Text>
-            </View>
-        ),
-        [props.icon, userAvatar, userAccountID, userLogin, title, subtitle],
-    );
-
-    if (!props.icon && !userDisplayName && !userLogin) {
-        return props.children;
-    }
-
-    return (
-        <Tooltip
-            renderTooltipContent={renderTooltipContent}
-            renderTooltipContentKey={[userDisplayName, userLogin]}
-        >
-            {props.children}
-        </Tooltip>
-    );
-}
+/**
+ * @param {propTypes} props
+ * @returns {ReactNodeLike}
+ */
+const UserDetailsTooltip = (props) => props.children;
 
 UserDetailsTooltip.propTypes = propTypes;
-UserDetailsTooltip.defaultProps = defaultProps;
 UserDetailsTooltip.displayName = 'UserDetailsTooltip';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetailsList: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-    }),
-)(UserDetailsTooltip);
+export default UserDetailsTooltip;
diff --git a/src/components/UserDetailsTooltip/index.web.js b/src/components/UserDetailsTooltip/index.web.js
new file mode 100644
index 000000000000..998ea95d3218
--- /dev/null
+++ b/src/components/UserDetailsTooltip/index.web.js
@@ -0,0 +1,82 @@
+import React, {useCallback} from 'react';
+import {View, Text} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import Avatar from '../Avatar';
+import Tooltip from '../Tooltip';
+import {propTypes, defaultProps} from './userDetailsTooltipPropTypes';
+import styles from '../../styles/styles';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as UserUtils from '../../libs/UserUtils';
+import CONST from '../../CONST';
+import * as LocalePhoneNumber from '../../libs/LocalePhoneNumber';
+import useLocalize from '../../hooks/useLocalize';
+
+function UserDetailsTooltip(props) {
+    const localize = useLocalize();
+
+    const userDetails = lodashGet(props.personalDetailsList, props.accountID, 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;
+
+    // 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.
+    if (props.delegateAccountID) {
+        const delegateUserDetails = lodashGet(props.personalDetailsList, props.delegateAccountID, {});
+        const delegateUserDisplayName = delegateUserDetails.displayName ? delegateUserDetails.displayName.trim() : '';
+        userDisplayName = `${delegateUserDisplayName} (${localize.translate('reportAction.asCopilot')} ${userDisplayName})`;
+        userLogin = delegateUserDetails.login;
+        userAvatar = delegateUserDetails.avatar;
+        userAccountID = props.delegateAccountID;
+    }
+
+    let title = String(userDisplayName).trim() ? userDisplayName : '';
+    const subtitle = (userLogin || '').trim() && !_.isEqual(LocalePhoneNumber.formatPhoneNumber(userLogin || ''), userDisplayName) ? Str.removeSMSDomain(userLogin) : '';
+    if (props.icon && props.icon.type === CONST.ICON_TYPE_WORKSPACE) {
+        title = props.icon.name;
+    }
+    const renderTooltipContent = useCallback(
+        () => (
+            <View style={[styles.alignItemsCenter, styles.ph2, styles.pv2]}>
+                <View style={styles.emptyAvatar}>
+                    <Avatar
+                        containerStyles={[styles.actionAvatar]}
+                        source={props.icon ? props.icon.source : UserUtils.getAvatar(userAvatar, userAccountID)}
+                        type={props.icon ? props.icon.type : CONST.ICON_TYPE_AVATAR}
+                        name={props.icon ? props.icon.name : userLogin}
+                    />
+                </View>
+                <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{title}</Text>
+                <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{subtitle}</Text>
+            </View>
+        ),
+        [props.icon, userAvatar, userAccountID, userLogin, title, subtitle],
+    );
+
+    if (!props.icon && !userDisplayName && !userLogin) {
+        return props.children;
+    }
+
+    return (
+        <Tooltip
+            renderTooltipContent={renderTooltipContent}
+            renderTooltipContentKey={[userDisplayName, userLogin]}
+        >
+            {props.children}
+        </Tooltip>
+    );
+}
+
+UserDetailsTooltip.propTypes = propTypes;
+UserDetailsTooltip.defaultProps = defaultProps;
+UserDetailsTooltip.displayName = 'UserDetailsTooltip';
+
+export default withOnyx({
+    personalDetailsList: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+})(UserDetailsTooltip);
diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
index 271e74aaf06c..88a8ac155ad4 100644
--- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
+++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import personalDetailsPropType from '../../pages/personalDetailsPropType';
 import avatarPropTypes from '../avatarPropTypes';
-import {withLocalizePropTypes} from '../withLocalize';
 
 const propTypes = {
     /** User's Account ID */
@@ -26,9 +25,6 @@ const propTypes = {
 
     /** The accountID of the copilot who took this action on behalf of the user */
     delegateAccountID: PropTypes.number,
-
-    /** Localization props */
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {