Use tooltip compound in `ReadReceiptPerson` component

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -23,12 +23,10 @@ import { IReadReceiptProps } from "./EventTile";
 import AccessibleButton from "../elements/AccessibleButton";
 import MemberAvatar from "../avatars/MemberAvatar";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import { Alignment } from "../elements/Tooltip";
 import { formatDate } from "../../../DateUtils";
 import { Action } from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
 import ContextMenu, { aboveLeftOf, MenuItem, useContextMenu } from "../../structures/ContextMenu";
-import { useTooltip } from "../../../utils/useTooltip";
 import { _t } from "../../../languageHandler";
 import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 import { formatList } from "../../../utils/FormattingUtils";
@@ -219,53 +217,40 @@ function ReadReceiptPerson({
     isTwelveHour,
     onAfterClick,
 }: ReadReceiptPersonProps): JSX.Element {
-    const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
-        alignment: Alignment.Top,
-        tooltipClassName: "mx_ReadReceiptGroup_person--tooltip",
-        label: (
-            <>
-                <div className="mx_Tooltip_title">{roomMember?.rawDisplayName ?? userId}</div>
-                <div className="mx_Tooltip_sub">{userId}</div>
-            </>
-        ),
-    });
-
     return (
-        <MenuItem
+        <Tooltip label={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
-            className="mx_ReadReceiptGroup_person"
+            <div>
-            onClick={() => {
+                <MenuItem
-                dis.dispatch({
+                    className="mx_ReadReceiptGroup_person"
-                    action: Action.ViewUser,
+                    onClick={() => {
-                    // XXX: We should be using a real member object and not assuming what the receiver wants.
+                        dis.dispatch({
-                    // The ViewUser action leads to the RightPanelStore, and RightPanelStoreIPanelState defines the
+                            action: Action.ViewUser,
-                    // member property of IRightPanelCardState as `RoomMember | User`, so we’re fine for now, but we
+                            // XXX: We should be using a real member object and not assuming what the receiver wants.
-                    // should definitely clean this up later
+                            // The ViewUser action leads to the RightPanelStore, and RightPanelStoreIPanelState defines the
-                    member: roomMember ?? ({ userId } as User),
+                            // member property of IRightPanelCardState as `RoomMember | User`, so we’re fine for now, but we
-                    push: false,
+                            // should definitely clean this up later
-                });
+                            member: roomMember ?? ({ userId } as User),
-                onAfterClick?.();
+                            push: false,
-            }}
+                        });
-            onMouseOver={showTooltip}
+                        onAfterClick?.();
-            onMouseLeave={hideTooltip}
+                    }}
-            onFocus={showTooltip}
+                >
-            onBlur={hideTooltip}
+                    <MemberAvatar
-            onWheel={hideTooltip}
+                        member={roomMember}
-        >
+                        fallbackUserId={userId}
-            <MemberAvatar
+                        size="24px"
-                member={roomMember}
+                        aria-hidden="true"
-                fallbackUserId={userId}
+                        aria-live="off"
-                size="24px"
+                        resizeMethod="crop"
-                aria-hidden="true"
+                        hideTitle
-                aria-live="off"
+                    />
-                resizeMethod="crop"
+                    <div className="mx_ReadReceiptGroup_name">
-                hideTitle
+                        <p>{roomMember?.name ?? userId}</p>
-            />
+                        <p className="mx_ReadReceiptGroup_secondary">{formatDate(new Date(ts), isTwelveHour)}</p>
-            <div className="mx_ReadReceiptGroup_name">
+                    </div>
-                <p>{roomMember?.name ?? userId}</p>
+                </MenuItem>
-                <p className="mx_ReadReceiptGroup_secondary">{formatDate(new Date(ts), isTwelveHour)}</p>
             </div>
-            {tooltip}
+        </Tooltip>
-        </MenuItem>
     );
 }