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,18 +217,9 @@ 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 (
+        <Tooltip label={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
+            <div>
                 <MenuItem
                     className="mx_ReadReceiptGroup_person"
                     onClick={() => {
@@ -245,11 +234,6 @@ function ReadReceiptPerson({
                         });
                         onAfterClick?.();
                     }}
-            onMouseOver={showTooltip}
-            onMouseLeave={hideTooltip}
-            onFocus={showTooltip}
-            onBlur={hideTooltip}
-            onWheel={hideTooltip}
                 >
                     <MemberAvatar
                         member={roomMember}
@@ -264,8 +248,9 @@ function ReadReceiptPerson({
                         <p>{roomMember?.name ?? userId}</p>
                         <p className="mx_ReadReceiptGroup_secondary">{formatDate(new Date(ts), isTwelveHour)}</p>
                     </div>
-            {tooltip}
                 </MenuItem>
+            </div>
+        </Tooltip>
     );
 }