From 5354e6efea8fa9ac0ab74e316db52d00d6de57d7 Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Fri, 12 Apr 2024 14:56:23 +0200
Subject: [PATCH] Use new compound tooltip

---
 src/Modal.tsx                                 | 46 +++++++++----------
 src/components/structures/ContextMenu.tsx     | 21 ++++-----
 src/components/structures/MatrixChat.tsx      |  5 +-
 .../auth/forgot-password/CheckEmail.tsx       |  2 +-
 .../auth/forgot-password/VerifyEmailModal.tsx |  2 +-
 .../views/avatars/DecoratedRoomAvatar.tsx     |  2 +-
 src/components/views/elements/InfoTooltip.tsx |  2 +-
 .../views/elements/PersistedElement.tsx       |  9 ++--
 src/components/views/elements/Pill.tsx        |  2 +-
 .../views/elements/TextWithTooltip.tsx        |  2 +-
 .../views/messages/MStickerBody.tsx           |  3 +-
 src/components/views/messages/TextualBody.tsx |  7 +--
 .../views/polls/pollHistory/PollListItem.tsx  |  2 +-
 .../polls/pollHistory/PollListItemEnded.tsx   |  2 +-
 .../views/right_panel/RoomSummaryCard.tsx     |  2 +-
 src/components/views/rooms/E2EIcon.tsx        |  6 +--
 src/components/views/rooms/EventTile.tsx      |  2 +-
 .../views/rooms/LegacyRoomHeader.tsx          |  2 +-
 .../views/rooms/NotificationBadge.tsx         |  2 +-
 src/components/views/rooms/RoomHeader.tsx     |  6 +--
 .../devices/FilteredDeviceListHeader.tsx      |  2 +-
 .../ThreadsActivityCentreButton.tsx           |  2 +-
 src/toasts/IncomingCallToast.tsx              |  6 +--
 src/utils/exportUtils/HtmlExport.tsx          | 41 ++++++++---------
 src/utils/pillify.tsx                         | 19 +++-----
 src/utils/tooltipify.tsx                      |  9 ++--
 .../structures/MessagePanel-test.tsx          |  5 +-
 .../components/structures/RightPanel-test.tsx |  2 -
 test/components/structures/RoomView-test.tsx  |  3 --
 .../structures/SpaceHierarchy-test.tsx        |  5 +-
 .../structures/ThreadPanel-test.tsx           | 34 +++++---------
 .../structures/TimelinePanel-test.tsx         | 29 ++++--------
 .../structures/auth/ForgotPassword-test.tsx   |  2 +-
 .../views/beacon/BeaconListItem-test.tsx      |  2 -
 .../views/beacon/BeaconViewDialog-test.tsx    |  3 +-
 .../views/beacon/ShareLatestLocation-test.tsx |  4 +-
 .../views/dialogs/ServerPickerDialog-test.tsx |  3 +-
 .../views/elements/FacePile-test.tsx          |  2 -
 test/components/views/elements/Pill-test.tsx  |  2 +-
 .../views/messages/CallEvent-test.tsx         |  2 +-
 .../views/messages/MStickerBody-test.tsx      |  3 +-
 .../views/messages/MessageTimestamp-test.tsx  |  6 +--
 .../polls/pollHistory/PollListItem-test.tsx   |  4 +-
 .../pollHistory/PollListItemEnded-test.tsx    |  2 +-
 .../views/rooms/LegacyRoomHeader-test.tsx     |  4 +-
 .../views/rooms/MemberList-test.tsx           |  3 --
 .../views/rooms/MemberTile-test.tsx           |  7 ++-
 .../views/rooms/MessageComposer-test.tsx      |  2 -
 .../spaces/ThreadsActivityCentre-test.tsx     |  3 --
 49 files changed, 127 insertions(+), 211 deletions(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index aa4ba691dc..2ac12d280f 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -20,7 +20,7 @@ import ReactDOM from "react-dom";
 import classNames from "classnames";
 import { defer, sleep } from "matrix-js-sdk/src/utils";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
-import { Glass, TooltipProvider } from "@vector-im/compound-web";
+import { Glass } from "@vector-im/compound-web";
 
 import dis from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
@@ -374,18 +374,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
 
             const staticDialog = (
-                <TooltipProvider>
-                    <div className={classes}>
-                        <Glass className="mx_Dialog_border">
-                            <div className="mx_Dialog">{this.staticModal.elem}</div>
-                        </Glass>
-                        <div
-                            data-testid="dialog-background"
-                            className="mx_Dialog_background mx_Dialog_staticBackground"
-                            onClick={this.onBackgroundClick}
-                        />
-                    </div>
-                </TooltipProvider>
+                <div className={classes}>
+                    <Glass className="mx_Dialog_border">
+                        <div className="mx_Dialog">{this.staticModal.elem}</div>
+                    </Glass>
+                    <div
+                        data-testid="dialog-background"
+                        className="mx_Dialog_background mx_Dialog_staticBackground"
+                        onClick={this.onBackgroundClick}
+                    />
+                </div>
             );
 
             ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -401,18 +399,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             });
 
             const dialog = (
-                <TooltipProvider>
-                    <div className={classes}>
-                        <Glass className="mx_Dialog_border">
-                            <div className="mx_Dialog">{modal.elem}</div>
-                        </Glass>
-                        <div
-                            data-testid="dialog-background"
-                            className="mx_Dialog_background"
-                            onClick={this.onBackgroundClick}
-                        />
-                    </div>
-                </TooltipProvider>
+                <div className={classes}>
+                    <Glass className="mx_Dialog_border">
+                        <div className="mx_Dialog">{modal.elem}</div>
+                    </Glass>
+                    <div
+                        data-testid="dialog-background"
+                        className="mx_Dialog_background"
+                        onClick={this.onBackgroundClick}
+                    />
+                </div>
             );
 
             setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));
diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
index 26b52a6e72..0b71c8dd30 100644
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@@ -20,7 +20,6 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { Writeable } from "../../@types/common";
 import UIStore from "../../stores/UIStore";
@@ -630,17 +629,15 @@ export function createMenu(
     };
 
     const menu = (
-        <TooltipProvider>
-            <ContextMenu
-                {...props}
-                mountAsChild={true}
-                hasBackground={false}
-                onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
-                windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
-            >
-                <ElementClass {...props} onFinished={onFinished} />
-            </ContextMenu>
-        </TooltipProvider>
+        <ContextMenu
+            {...props}
+            mountAsChild={true}
+            hasBackground={false}
+            onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
+            windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
+        >
+            <ElementClass {...props} onFinished={onFinished} />
+        </ContextMenu>
     );
 
     ReactDOM.render(menu, getOrCreateContainer());
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index bda30a06a3..cd14552f07 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -34,7 +34,6 @@ import { throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 // what-input helps improve keyboard accessibility
 import "what-input";
@@ -2136,9 +2135,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         return (
             <ErrorBoundary>
-                <SDKContext.Provider value={this.stores}>
-                    <TooltipProvider>{view}</TooltipProvider>
-                </SDKContext.Provider>
+                <SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
             </ErrorBoundary>
         );
     }
diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx
index d9d9c4ca80..af3e6cf216 100644
--- a/src/components/structures/auth/forgot-password/CheckEmail.tsx
+++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -66,7 +66,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
                         <RetryIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}
diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
index 11ede00340..fd461ddc5d 100644
--- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
+++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@@ -65,7 +65,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
 
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
                         <RetryIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index 5879dd3b1a..1c3f0b7ae0 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -218,7 +218,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                     viewAvatarOnClick={this.props.viewAvatarOnClick}
                 />
                 {icon && (
-                    <Tooltip label={tooltipText(this.state.icon)!} side="bottom">
+                    <Tooltip label={tooltipText(this.state.icon)!} placement="bottom">
                         {icon}
                     </Tooltip>
                 )}
diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx
index 1f6247ccf3..318552cde9 100644
--- a/src/components/views/elements/InfoTooltip.tsx
+++ b/src/components/views/elements/InfoTooltip.tsx
@@ -43,7 +43,7 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
 
         // Tooltip are forced on the right for a more natural feel to them on info icons
         return (
-            <Tooltip label={tooltip || title} side="right">
+            <Tooltip label={tooltip || title} placement="right">
                 <div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
                     <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
                     {children}
diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx
index 37e5fc26ad..99730ec344 100644
--- a/src/components/views/elements/PersistedElement.tsx
+++ b/src/components/views/elements/PersistedElement.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React, { MutableRefObject, ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import dis from "../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -177,11 +176,9 @@ export default class PersistedElement extends React.Component<IProps> {
     private renderApp(): void {
         const content = (
             <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                <TooltipProvider>
-                    <div ref={this.collectChild} style={this.props.style}>
-                        {this.props.children}
-                    </div>
-                </TooltipProvider>
+                <div ref={this.collectChild} style={this.props.style}>
+                    {this.props.children}
+                </div>
             </MatrixClientContext.Provider>
         );
 
diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx
index 9f332e29c3..52ad1e2b89 100644
--- a/src/components/views/elements/Pill.tsx
+++ b/src/components/views/elements/Pill.tsx
@@ -151,7 +151,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
                 <Tooltip
                     label={resourceId ?? ""}
                     open={resourceId ? undefined : false}
-                    side="right"
+                    placement="right"
                     isTriggerInteractive={isAnchor}
                 >
                     {isAnchor ? (
diff --git a/src/components/views/elements/TextWithTooltip.tsx b/src/components/views/elements/TextWithTooltip.tsx
index 95f8608dae..b6a3bd0cd2 100644
--- a/src/components/views/elements/TextWithTooltip.tsx
+++ b/src/components/views/elements/TextWithTooltip.tsx
@@ -33,7 +33,7 @@ export default class TextWithTooltip extends React.Component<IProps> {
         const { className, children, tooltip, tooltipProps } = this.props;
 
         return (
-            <Tooltip label={tooltip} side="right">
+            <Tooltip label={tooltip} placement="right">
                 <span className={className} tabIndex={tooltipProps?.tabIndex ?? 0}>
                     {children}
                 </span>
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index a002670b52..073da22b2a 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -69,8 +69,7 @@ export default class MStickerBody extends MImageBody {
         if (!content?.body || !content.info?.w) return null;
 
         return {
-            align: "center",
-            side: "right",
+            placement: "right",
             label: content.body,
         };
     }
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index a3bac0b9cd..f0b5c70f17 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 import ReactDOM from "react-dom";
 import { MsgType } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import * as HtmlUtils from "../../../HtmlUtils";
 import { formatDate } from "../../../DateUtils";
@@ -349,11 +348,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
                 const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
-                const spoiler = (
-                    <TooltipProvider>
-                        <Spoiler reason={reason} contentHtml={node.outerHTML} />
-                    </TooltipProvider>
-                );
+                const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
 
                 ReactDOM.render(spoiler, spoilerContainer);
                 node.parentNode?.replaceChild(spoilerContainer, node);
diff --git a/src/components/views/polls/pollHistory/PollListItem.tsx b/src/components/views/polls/pollHistory/PollListItem.tsx
index 58a2909ea0..7115f3b6a1 100644
--- a/src/components/views/polls/pollHistory/PollListItem.tsx
+++ b/src/components/views/polls/pollHistory/PollListItem.tsx
@@ -36,7 +36,7 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
     const formattedDate = formatLocalDateShort(event.getTs());
     return (
         <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
-            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
                 <div className="mx_PollListItem_content">
                     <span>{formattedDate}</span>
                     <PollIcon className="mx_PollListItem_icon" />
diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
index 657d940865..5da7772323 100644
--- a/src/components/views/polls/pollHistory/PollListItemEnded.tsx
+++ b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
@@ -99,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
 
     return (
         <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
-            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
                 <div className="mx_PollListItemEnded_content">
                     <div className="mx_PollListItemEnded_title">
                         <PollIcon className="mx_PollListItemEnded_icon" />
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 308d21dcf0..d288541f5c 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -405,7 +405,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                 align="center"
                 justify="space-between"
             >
-                <Tooltip label={_t("action|search")} side="right">
+                <Tooltip label={_t("action|search")} placement="right">
                     <button
                         className="mx_RoomSummaryCard_searchBtn"
                         data-testid="summary-search"
diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx
index b6cbbe96b5..e655d8b86e 100644
--- a/src/components/views/rooms/E2EIcon.tsx
+++ b/src/components/views/rooms/E2EIcon.tsx
@@ -48,7 +48,7 @@ interface Props {
     size?: number;
     onClick?: () => void;
     hideTooltip?: boolean;
-    tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+    tooltipPlacement?: ComponentProps<typeof Tooltip>["placement"];
     bordered?: boolean;
 }
 
@@ -69,7 +69,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
     size,
     onClick,
     hideTooltip,
-    tooltipSide,
+    tooltipPlacement,
     bordered,
 }) => {
     const classes = classNames(
@@ -109,7 +109,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
     }
 
     return (
-        <Tooltip label={label} side={tooltipSide} isTriggerInteractive={!!onClick}>
+        <Tooltip label={label} placement={tooltipPlacement} isTriggerInteractive={!!onClick}>
             {content}
         </Tooltip>
     );
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index b36fb97255..108e0d9d93 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1546,7 +1546,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
     return (
         <div className="mx_EventTile_msgOption">
             <div className="mx_ReadReceiptGroup">
-                <Tooltip label={label} side="top" align="end">
+                <Tooltip label={label} placement="top-end">
                     <div className="mx_ReadReceiptGroup_button">
                         <span className="mx_ReadReceiptGroup_container">
                             <span className={receiptClasses}>{nonCssBadge}</span>
diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx
index 7594931e3b..5fab692046 100644
--- a/src/components/views/rooms/LegacyRoomHeader.tsx
+++ b/src/components/views/rooms/LegacyRoomHeader.tsx
@@ -784,7 +784,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         const icon = this.props.viewingCall ? (
             <div className="mx_LegacyRoomHeader_icon mx_LegacyRoomHeader_icon_video" />
         ) : this.props.e2eStatus ? (
-            <E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipSide="bottom" />
+            <E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipPlacement="bottom" />
         ) : // If we're expecting an E2EE status to come in, but it hasn't
         // yet been loaded, insert a blank div to reserve space
         this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? (
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 20ee53d95d..b142c9a128 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -121,7 +121,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
         if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
             return (
-                <Tooltip label={_t("notifications|message_didnt_send")} side="right">
+                <Tooltip label={_t("notifications|message_didnt_send")} placement="right">
                     {badge}
                 </Tooltip>
             );
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index bdc0476aad..4d003de05d 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -252,7 +252,7 @@ export default function RoomHeader({
                             <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
 
                             {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
-                                <Tooltip label={_t("common|public_room")} side="right">
+                                <Tooltip label={_t("common|public_room")} placement="right">
                                     <PublicIcon
                                         width="16px"
                                         height="16px"
@@ -263,7 +263,7 @@ export default function RoomHeader({
                             )}
 
                             {isDirectMessage && e2eStatus === E2EStatus.Verified && (
-                                <Tooltip label={_t("common|verified")} side="right">
+                                <Tooltip label={_t("common|verified")} placement="right">
                                     <VerifiedIcon
                                         width="16px"
                                         height="16px"
@@ -274,7 +274,7 @@ export default function RoomHeader({
                             )}
 
                             {isDirectMessage && e2eStatus === E2EStatus.Warning && (
-                                <Tooltip label={_t("room|header_untrusted_label")} side="right">
+                                <Tooltip label={_t("room|header_untrusted_label")} placement="right">
                                     <ErrorIcon
                                         width="16px"
                                         height="16px"
diff --git a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
index 551b03c96c..cb7359d448 100644
--- a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
@@ -40,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
     return (
         <div className="mx_FilteredDeviceListHeader" {...rest}>
             {!isSelectDisabled && (
-                <Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}>
+                <Tooltip label={checkboxLabel} placement="top" isTriggerInteractive={false}>
                     <StyledCheckbox
                         kind={CheckboxStyle.Solid}
                         checked={isAllSelected}
diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
index c2e35de7aa..fb9f324989 100644
--- a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
+++ b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
@@ -45,7 +45,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
         const openTooltip = displayLabel ? false : undefined;
 
         return (
-            <Tooltip label={_t("common|threads")} side="right" open={openTooltip}>
+            <Tooltip label={_t("common|threads")} placement="right" open={openTooltip}>
                 <IconButton
                     aria-label={_t("common|threads")}
                     className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
index 5fc64fc3de..e9064e58aa 100644
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
 // eslint-disable-next-line no-restricted-imports
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web";
+import { Button, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 
 import { _t } from "../languageHandler";
@@ -168,7 +168,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
     );
 
     return (
-        <TooltipProvider>
+        <>
             <div>
                 <RoomAvatar room={room ?? undefined} size="24px" />
             </div>
@@ -200,6 +200,6 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
                 onClick={onCloseClick}
                 title={_t("action|close")}
             />
-        </TooltipProvider>
+        </>
     );
 }
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6f17942007..3edf0f3cc0 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -20,7 +20,6 @@ import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"
 import { renderToStaticMarkup } from "react-dom/server";
 import { logger } from "matrix-js-sdk/src/logger";
 import escapeHtml from "escape-html";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
@@ -284,27 +283,25 @@ export default class HTMLExporter extends Exporter {
         return (
             <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
                 <MatrixClientContext.Provider value={this.room.client}>
-                    <TooltipProvider>
-                        <EventTile
-                            mxEvent={mxEv}
-                            continuation={continuation}
-                            isRedacted={mxEv.isRedacted()}
-                            replacingEventId={mxEv.replacingEventId()}
-                            forExport={true}
-                            alwaysShowTimestamps={true}
-                            showUrlPreview={false}
-                            checkUnmounting={() => false}
-                            isTwelveHour={false}
-                            last={false}
-                            lastInSection={false}
-                            permalinkCreator={this.permalinkCreator}
-                            lastSuccessful={false}
-                            isSelectedEvent={false}
-                            showReactions={false}
-                            layout={Layout.Group}
-                            showReadReceipts={false}
-                        />
-                    </TooltipProvider>
+                    <EventTile
+                        mxEvent={mxEv}
+                        continuation={continuation}
+                        isRedacted={mxEv.isRedacted()}
+                        replacingEventId={mxEv.replacingEventId()}
+                        forExport={true}
+                        alwaysShowTimestamps={true}
+                        showUrlPreview={false}
+                        checkUnmounting={() => false}
+                        isTwelveHour={false}
+                        last={false}
+                        lastInSection={false}
+                        permalinkCreator={this.permalinkCreator}
+                        lastSuccessful={false}
+                        isSelectedEvent={false}
+                        showReactions={false}
+                        layout={Layout.Group}
+                        showReadReceipts={false}
+                    />
                 </MatrixClientContext.Provider>
             </div>
         );
diff --git a/src/utils/pillify.tsx b/src/utils/pillify.tsx
index 22fcaec99a..38ac08d6ee 100644
--- a/src/utils/pillify.tsx
+++ b/src/utils/pillify.tsx
@@ -18,7 +18,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import SettingsStore from "../settings/SettingsStore";
 import { Pill, pillRoomNotifLen, pillRoomNotifPos, PillType } from "../components/views/elements/Pill";
@@ -84,9 +83,7 @@ export function pillifyLinks(
                 const pillContainer = document.createElement("span");
 
                 const pill = (
-                    <TooltipProvider>
-                        <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
-                    </TooltipProvider>
+                    <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
                 );
 
                 ReactDOM.render(pill, pillContainer);
@@ -141,14 +138,12 @@ export function pillifyLinks(
 
                         const pillContainer = document.createElement("span");
                         const pill = (
-                            <TooltipProvider>
-                                <Pill
-                                    type={PillType.AtRoomMention}
-                                    inMessage={true}
-                                    room={room}
-                                    shouldShowPillAvatar={shouldShowPillAvatar}
-                                />
-                            </TooltipProvider>
+                            <Pill
+                                type={PillType.AtRoomMention}
+                                inMessage={true}
+                                room={room}
+                                shouldShowPillAvatar={shouldShowPillAvatar}
+                            />
                         );
 
                         ReactDOM.render(pill, pillContainer);
diff --git a/src/utils/tooltipify.tsx b/src/utils/tooltipify.tsx
index 8f384e59e4..e3280f7fe2 100644
--- a/src/utils/tooltipify.tsx
+++ b/src/utils/tooltipify.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import ReactDOM from "react-dom";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import PlatformPeg from "../PlatformPeg";
 import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
@@ -61,11 +60,9 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
             // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
             // without the superfluous span but this is not something React trivially supports at this time.
             const tooltip = (
-                <TooltipProvider>
-                    <LinkWithTooltip tooltip={href}>
-                        <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
-                    </LinkWithTooltip>
-                </TooltipProvider>
+                <LinkWithTooltip tooltip={href}>
+                    <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
+                </LinkWithTooltip>
             );
 
             ReactDOM.render(tooltip, node);
diff --git a/test/components/structures/MessagePanel-test.tsx b/test/components/structures/MessagePanel-test.tsx
index 3513cee91f..23f094d4ab 100644
--- a/test/components/structures/MessagePanel-test.tsx
+++ b/test/components/structures/MessagePanel-test.tsx
@@ -20,7 +20,6 @@ import { EventEmitter } from "events";
 import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { render } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../src/settings/SettingsStore";
@@ -99,9 +98,7 @@ describe("MessagePanel", function () {
     const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
         <MatrixClientContext.Provider value={client}>
             <RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
-                <TooltipProvider>
-                    <MessagePanel {...defaultProps} {...props} />
-                </TooltipProvider>
+                <MessagePanel {...defaultProps} {...props} />
             </RoomContext.Provider>
         </MatrixClientContext.Provider>
     );
diff --git a/test/components/structures/RightPanel-test.tsx b/test/components/structures/RightPanel-test.tsx
index 49eea96410..d7f5fbef11 100644
--- a/test/components/structures/RightPanel-test.tsx
+++ b/test/components/structures/RightPanel-test.tsx
@@ -19,7 +19,6 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { jest } from "@jest/globals";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import _RightPanel from "../../../src/components/structures/RightPanel";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
@@ -123,7 +122,6 @@ describe("RightPanel", () => {
                 resizeNotifier={resizeNotifier}
                 permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
             />,
-            { wrapper: TooltipProvider },
         );
         // Wait for RPS room 1 updates to fire
         const rpsUpdated = waitForRpsUpdate();
diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx
index d0d12d7105..31f5c896ae 100644
--- a/test/components/structures/RoomView-test.tsx
+++ b/test/components/structures/RoomView-test.tsx
@@ -33,7 +33,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib";
 import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import {
     stubClient,
@@ -145,7 +144,6 @@ describe("RoomView", () => {
                     wrappedRef={ref as any}
                 />
             </SDKContext.Provider>,
-            { wrapper: TooltipProvider },
         );
         await flushPromises();
         return roomView;
@@ -183,7 +181,6 @@ describe("RoomView", () => {
                     onRegistered={jest.fn()}
                 />
             </SDKContext.Provider>,
-            { wrapper: TooltipProvider },
         );
         await flushPromises();
         return roomView;
diff --git a/test/components/structures/SpaceHierarchy-test.tsx b/test/components/structures/SpaceHierarchy-test.tsx
index 653b24fc53..d25f8a6f12 100644
--- a/test/components/structures/SpaceHierarchy-test.tsx
+++ b/test/components/structures/SpaceHierarchy-test.tsx
@@ -20,7 +20,6 @@ import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@
 import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { mkStubRoom, stubClient } from "../../test-utils";
@@ -287,9 +286,7 @@ describe("SpaceHierarchy", () => {
         };
         const getComponent = (props = {}): React.ReactElement => (
             <MatrixClientContext.Provider value={client}>
-                <TooltipProvider>
-                    <SpaceHierarchy {...defaultProps} {...props} />
-                </TooltipProvider>
+                <SpaceHierarchy {...defaultProps} {...props} />
             </MatrixClientContext.Provider>
         );
 
diff --git a/test/components/structures/ThreadPanel-test.tsx b/test/components/structures/ThreadPanel-test.tsx
index 74a1d4023f..4f66379a3d 100644
--- a/test/components/structures/ThreadPanel-test.tsx
+++ b/test/components/structures/ThreadPanel-test.tsx
@@ -25,7 +25,6 @@ import {
     FeatureSupport,
     Thread,
 } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ThreadPanel, { ThreadFilterType, ThreadPanelHeader } from "../../../src/components/structures/ThreadPanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -51,7 +50,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             expect(asFragment()).toMatchSnapshot();
         });
@@ -63,7 +61,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.My}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             expect(asFragment()).toMatchSnapshot();
         });
@@ -75,7 +72,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             expect(asFragment()).toMatchSnapshot();
         });
@@ -87,7 +83,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             const found = container.querySelector(".mx_ThreadPanel_dropdown");
             expect(found).toBeTruthy();
@@ -103,7 +98,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             fireEvent.click(container.querySelector(".mx_ThreadPanel_dropdown")!);
             const found = screen.queryAllByRole("menuitemradio");
@@ -126,13 +120,11 @@ describe("ThreadPanel", () => {
             const { container } = render(
                 <RoomContext.Provider value={roomContextObject}>
                     <MatrixClientContext.Provider value={mockClient}>
-                        <TooltipProvider>
-                            <ThreadPanelHeader
-                                empty={false}
-                                filterOption={ThreadFilterType.All}
-                                setFilterOption={() => undefined}
-                            />
-                        </TooltipProvider>
+                        <ThreadPanelHeader
+                            empty={false}
+                            filterOption={ThreadFilterType.All}
+                            setFilterOption={() => undefined}
+                        />
                     </MatrixClientContext.Provider>
                 </RoomContext.Provider>,
             );
@@ -146,13 +138,11 @@ describe("ThreadPanel", () => {
             const mockClient = createTestClient();
             const { container } = render(
                 <MatrixClientContext.Provider value={mockClient}>
-                    <TooltipProvider>
-                        <ThreadPanelHeader
-                            empty={false}
-                            filterOption={ThreadFilterType.All}
-                            setFilterOption={() => undefined}
-                        />
-                    </TooltipProvider>
+                    <ThreadPanelHeader
+                        empty={false}
+                        filterOption={ThreadFilterType.All}
+                        setFilterOption={() => undefined}
+                    />
                 </MatrixClientContext.Provider>,
             );
             fireEvent.click(getByRole(container, "button", { name: "Mark all as read" }));
@@ -308,7 +298,7 @@ describe("ThreadPanel", () => {
             myThreads!.addLiveEvent(ownThread.rootEvent);
 
             let events: EventData[] = [];
-            const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider });
+            const renderResult = render(<TestThreadPanel />);
             await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
             await waitFor(() => {
                 events = findEvents(renderResult.container);
@@ -354,7 +344,7 @@ describe("ThreadPanel", () => {
             allThreads!.addLiveEvent(otherThread.rootEvent);
 
             let events: EventData[] = [];
-            const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider });
+            const renderResult = render(<TestThreadPanel />);
             await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
             await waitFor(() => {
                 events = findEvents(renderResult.container);
diff --git a/test/components/structures/TimelinePanel-test.tsx b/test/components/structures/TimelinePanel-test.tsx
index afbe173940..0396ea68a4 100644
--- a/test/components/structures/TimelinePanel-test.tsx
+++ b/test/components/structures/TimelinePanel-test.tsx
@@ -39,7 +39,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import React, { createRef } from "react";
 import { Mocked, mocked } from "jest-mock";
 import { forEachRight } from "lodash";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import TimelinePanel from "../../../src/components/structures/TimelinePanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -212,7 +211,6 @@ describe("TimelinePanel", () => {
                     manageReadReceipts={true}
                     ref={ref}
                 />,
-                { wrapper: TooltipProvider },
             );
             await flushPromises();
             timelinePanel = ref.current!;
@@ -392,7 +390,7 @@ describe("TimelinePanel", () => {
             onEventScrolledIntoView: jest.fn(),
         };
 
-        const { rerender } = render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+        const { rerender } = render(<TimelinePanel {...props} />);
         expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined);
         props.eventId = events[1].getId();
         rerender(<TimelinePanel {...props} />);
@@ -409,9 +407,7 @@ describe("TimelinePanel", () => {
         setupPagination(client, timeline, eventsPage1, null);
 
         await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {
-                wrapper: TooltipProvider,
-            });
+            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {});
 
             await waitFor(() => expectEvents(container, [events[1]]));
 
@@ -428,7 +424,7 @@ describe("TimelinePanel", () => {
         const [, room, events] = setupTestData();
 
         await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} />, { wrapper: TooltipProvider });
+            const { container } = render(<TimelinePanel {...getProps(room, events)} />);
 
             await waitFor(() => expectEvents(container, [events[0], events[1]]));
 
@@ -455,7 +451,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: otherTimeline, liveEvent: true };
@@ -471,7 +467,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@@ -487,7 +483,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@@ -504,7 +500,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
@@ -527,7 +523,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             await flushPromises();
 
@@ -568,7 +564,6 @@ describe("TimelinePanel", () => {
                     overlayTimelineSet={overlayTimelineSet}
                     overlayTimelineSetFilter={isCallEvent}
                 />,
-                { wrapper: TooltipProvider },
             );
             await waitFor(() =>
                 expectEvents(container, [
@@ -608,7 +603,6 @@ describe("TimelinePanel", () => {
 
             const { container } = render(
                 <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                { wrapper: TooltipProvider },
             );
 
             await waitFor(() =>
@@ -640,7 +634,6 @@ describe("TimelinePanel", () => {
 
             const { container } = render(
                 <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                { wrapper: TooltipProvider },
             );
 
             await waitFor(() =>
@@ -672,7 +665,6 @@ describe("TimelinePanel", () => {
 
             const { container } = render(
                 <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                { wrapper: TooltipProvider },
             );
 
             await waitFor(() =>
@@ -707,7 +699,6 @@ describe("TimelinePanel", () => {
                         timelineSet={timelineSet}
                         overlayTimelineSet={overlayTimelineSet}
                     />,
-                    { wrapper: TooltipProvider },
                 );
 
                 await waitFor(() => expectEvents(container, [overlayEvents[0], events[0]]));
@@ -781,7 +772,6 @@ describe("TimelinePanel", () => {
             await withScrollPanelMountSpy(async (mountSpy) => {
                 const { container } = render(
                     <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                    { wrapper: TooltipProvider },
                 );
 
                 await waitFor(() =>
@@ -894,7 +884,6 @@ describe("TimelinePanel", () => {
                 <MatrixClientContext.Provider value={client}>
                     <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
                 </MatrixClientContext.Provider>,
-                { wrapper: TooltipProvider },
             );
             await dom.findByText("RootEvent");
             await dom.findByText("ReplyEvent1");
@@ -948,7 +937,6 @@ describe("TimelinePanel", () => {
                 <MatrixClientContext.Provider value={client}>
                     <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
                 </MatrixClientContext.Provider>,
-                { wrapper: TooltipProvider },
             );
             await dom.findByText("RootEvent");
             await dom.findByText("ReplyEvent1");
@@ -1017,7 +1005,6 @@ describe("TimelinePanel", () => {
             <MatrixClientContext.Provider value={client}>
                 <TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         );
 
         await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull());
diff --git a/test/components/structures/auth/ForgotPassword-test.tsx b/test/components/structures/auth/ForgotPassword-test.tsx
index 0dbb495523..a1bac390b3 100644
--- a/test/components/structures/auth/ForgotPassword-test.tsx
+++ b/test/components/structures/auth/ForgotPassword-test.tsx
@@ -103,7 +103,7 @@ describe("<ForgotPassword>", () => {
         beforeEach(() => {
             renderResult = render(
                 <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
-                { wrapper: TooltipProvider },
+                ,
             );
         });
 
diff --git a/test/components/views/beacon/BeaconListItem-test.tsx b/test/components/views/beacon/BeaconListItem-test.tsx
index 6050e2b6cd..10497b369f 100644
--- a/test/components/views/beacon/BeaconListItem-test.tsx
+++ b/test/components/views/beacon/BeaconListItem-test.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { act, fireEvent, render } from "@testing-library/react";
 import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -76,7 +75,6 @@ describe("<BeaconListItem />", () => {
             <MatrixClientContext.Provider value={mockClient}>
                 <BeaconListItem {...defaultProps} {...props} />
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         );
 
     const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {
diff --git a/test/components/views/beacon/BeaconViewDialog-test.tsx b/test/components/views/beacon/BeaconViewDialog-test.tsx
index b796253e2a..103ff2547d 100644
--- a/test/components/views/beacon/BeaconViewDialog-test.tsx
+++ b/test/components/views/beacon/BeaconViewDialog-test.tsx
@@ -80,8 +80,7 @@ describe("<BeaconViewDialog />", () => {
         matrixClient: mockClient as MatrixClient,
     };
 
-    const getComponent = (props = {}): RenderResult =>
-        render(<BeaconViewDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
+    const getComponent = (props = {}): RenderResult => render(<BeaconViewDialog {...defaultProps} {...props} />);
 
     const openSidebar = (getByTestId: RenderResult["getByTestId"]) => {
         fireEvent.click(getByTestId("beacon-view-dialog-open-sidebar"));
diff --git a/test/components/views/beacon/ShareLatestLocation-test.tsx b/test/components/views/beacon/ShareLatestLocation-test.tsx
index 279e21671f..654b3dc73a 100644
--- a/test/components/views/beacon/ShareLatestLocation-test.tsx
+++ b/test/components/views/beacon/ShareLatestLocation-test.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation";
 import { copyPlaintext } from "../../../../src/utils/strings";
@@ -33,8 +32,7 @@ describe("<ShareLatestLocation />", () => {
             timestamp: 123,
         },
     };
-    const getComponent = (props = {}) =>
-        render(<ShareLatestLocation {...defaultProps} {...props} />, { wrapper: TooltipProvider });
+    const getComponent = (props = {}) => render(<ShareLatestLocation {...defaultProps} {...props} />);
 
     beforeEach(() => {
         jest.clearAllMocks();
diff --git a/test/components/views/dialogs/ServerPickerDialog-test.tsx b/test/components/views/dialogs/ServerPickerDialog-test.tsx
index 06fbca9550..0ca923d9cb 100644
--- a/test/components/views/dialogs/ServerPickerDialog-test.tsx
+++ b/test/components/views/dialogs/ServerPickerDialog-test.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import fetchMock from "fetch-mock-jest";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog";
 import SdkConfig from "../../../../src/SdkConfig";
@@ -56,7 +55,7 @@ describe("<ServerPickerDialog />", () => {
             onFinished: any;
             serverConfig: ValidatedServerConfig;
         }> = {},
-    ) => render(<ServerPickerDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
+    ) => render(<ServerPickerDialog {...defaultProps} {...props} />);
 
     beforeEach(() => {
         SdkConfig.add({
diff --git a/test/components/views/elements/FacePile-test.tsx b/test/components/views/elements/FacePile-test.tsx
index 313a0299be..8026c47407 100644
--- a/test/components/views/elements/FacePile-test.tsx
+++ b/test/components/views/elements/FacePile-test.tsx
@@ -14,7 +14,6 @@ limitations under the License.
 
 import { render } from "@testing-library/react";
 import React from "react";
-import { TooltipProvider } from "@vector-im/compound-web";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import FacePile from "../../../../src/components/views/elements/FacePile";
@@ -26,7 +25,6 @@ describe("<FacePile />", () => {
 
         const { asFragment } = render(
             <FacePile members={[member]} size="36px" overflow={false} tooltipLabel="tooltip" />,
-            { wrapper: TooltipProvider },
         );
 
         expect(asFragment()).toMatchSnapshot();
diff --git a/test/components/views/elements/Pill-test.tsx b/test/components/views/elements/Pill-test.tsx
index ea1a8b34eb..379ace39d7 100644
--- a/test/components/views/elements/Pill-test.tsx
+++ b/test/components/views/elements/Pill-test.tsx
@@ -65,7 +65,7 @@ describe("<Pill>", () => {
             <div onClick={pillParentClickHandler}>
                 <Pill {...withDefault} />
             </div>,
-            { wrapper: TooltipProvider },
+            ,
         );
     };
 
diff --git a/test/components/views/messages/CallEvent-test.tsx b/test/components/views/messages/CallEvent-test.tsx
index 37a26d4bc4..76f1b4bde5 100644
--- a/test/components/views/messages/CallEvent-test.tsx
+++ b/test/components/views/messages/CallEvent-test.tsx
@@ -103,7 +103,7 @@ describe("CallEvent", () => {
     });
 
     const renderEvent = () => {
-        render(<CallEvent mxEvent={call.event} />, { wrapper: TooltipProvider });
+        render(<CallEvent mxEvent={call.event} />);
     };
 
     it("shows a message and duration if the call was ended", () => {
diff --git a/test/components/views/messages/MStickerBody-test.tsx b/test/components/views/messages/MStickerBody-test.tsx
index ee0fb5c337..e541149a79 100644
--- a/test/components/views/messages/MStickerBody-test.tsx
+++ b/test/components/views/messages/MStickerBody-test.tsx
@@ -19,7 +19,6 @@ import { render, screen } from "@testing-library/react";
 import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import fetchMock from "fetch-mock-jest";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import {
@@ -86,7 +85,7 @@ describe("<MStickerBody/>", () => {
     it("should show a tooltip on hover", async () => {
         fetchMock.getOnce(url, { status: 200 });
 
-        render(<MStickerBody {...props} mxEvent={mediaEvent} />, { wrapper: TooltipProvider });
+        render(<MStickerBody {...props} mxEvent={mediaEvent} />);
 
         expect(screen.queryByRole("tooltip")).toBeNull();
         await userEvent.hover(screen.getByRole("img"));
diff --git a/test/components/views/messages/MessageTimestamp-test.tsx b/test/components/views/messages/MessageTimestamp-test.tsx
index 5b8df86d6c..3e46dbcf10 100644
--- a/test/components/views/messages/MessageTimestamp-test.tsx
+++ b/test/components/views/messages/MessageTimestamp-test.tsx
@@ -31,7 +31,7 @@ describe("MessageTimestamp", () => {
     const DAY_MS = HOUR_MS * 24;
 
     it("should render HH:MM", () => {
-        const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
+        const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, );
         expect(asFragment()).toMatchInlineSnapshot(`
             <DocumentFragment>
               <span
@@ -47,7 +47,7 @@ describe("MessageTimestamp", () => {
     });
 
     it("should show full date & time on hover", async () => {
-        const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
+        const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />, );
         await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
         expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`);
     });
@@ -55,7 +55,7 @@ describe("MessageTimestamp", () => {
     it("should show sent & received time on hover if passed", async () => {
         const { container } = render(
             <MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
-            { wrapper: TooltipProvider },
+            ,
         );
         await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
         expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(
diff --git a/test/components/views/polls/pollHistory/PollListItem-test.tsx b/test/components/views/polls/pollHistory/PollListItem-test.tsx
index 1b49ca922b..b48cddb8d8 100644
--- a/test/components/views/polls/pollHistory/PollListItem-test.tsx
+++ b/test/components/views/polls/pollHistory/PollListItem-test.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
 import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
@@ -26,8 +25,7 @@ describe("<PollListItem />", () => {
     const event = makePollStartEvent("Question?", "@me:domain.org");
     event.getContent().origin;
     const defaultProps = { event, onClick: jest.fn() };
-    const getComponent = (props = {}) =>
-        render(<PollListItem {...defaultProps} {...props} />, { wrapper: TooltipProvider });
+    const getComponent = (props = {}) => render(<PollListItem {...defaultProps} {...props} />);
 
     beforeAll(() => {
         // mock default locale to en-GB and set timezone
diff --git a/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx b/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
index 371547e67d..4aa923eb9e 100644
--- a/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
+++ b/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
@@ -61,7 +61,7 @@ describe("<PollListItemEnded />", () => {
     const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000);
 
     const getComponent = (props: { event: MatrixEvent; poll: Poll }) =>
-        render(<PollListItemEnded {...props} onClick={jest.fn()} />, { wrapper: TooltipProvider });
+        render(<PollListItemEnded {...props} onClick={jest.fn()} />);
 
     beforeAll(() => {
         // mock default locale to en-GB and set timezone
diff --git a/test/components/views/rooms/LegacyRoomHeader-test.tsx b/test/components/views/rooms/LegacyRoomHeader-test.tsx
index 1642915c23..1a1db41add 100644
--- a/test/components/views/rooms/LegacyRoomHeader-test.tsx
+++ b/test/components/views/rooms/LegacyRoomHeader-test.tsx
@@ -226,7 +226,7 @@ describe("LegacyRoomHeader", () => {
                     {...props}
                 />
             </RoomContext.Provider>,
-            { wrapper: TooltipProvider },
+            ,
         );
     };
 
@@ -870,7 +870,7 @@ function mountHeader(room: Room, propsOverride = {}, roomContext?: Partial<IRoom
         <RoomContext.Provider value={{ ...roomContext, room } as IRoomState}>
             <RoomHeader {...props} />
         </RoomContext.Provider>,
-        { wrapper: TooltipProvider },
+        ,
     );
 }
 
diff --git a/test/components/views/rooms/MemberList-test.tsx b/test/components/views/rooms/MemberList-test.tsx
index 753b247e59..3b7c5a13bd 100644
--- a/test/components/views/rooms/MemberList-test.tsx
+++ b/test/components/views/rooms/MemberList-test.tsx
@@ -21,7 +21,6 @@ import { Room, MatrixClient, RoomState, RoomMember, User, MatrixEvent } from "ma
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { compare } from "matrix-js-sdk/src/utils";
 import { mocked, MockedObject } from "jest-mock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as TestUtils from "../../../test-utils";
@@ -231,7 +230,6 @@ describe("MemberList", () => {
                     ref={gatherWrappedRef}
                 />
             </SDKContext.Provider>,
-            { wrapper: TooltipProvider },
         );
     }
 
@@ -383,7 +381,6 @@ describe("MemberList", () => {
                             roomId={room.roomId}
                         />
                     </SDKContext.Provider>,
-                    { wrapper: TooltipProvider },
                 );
             };
 
diff --git a/test/components/views/rooms/MemberTile-test.tsx b/test/components/views/rooms/MemberTile-test.tsx
index 555d9f8908..5f96147a50 100644
--- a/test/components/views/rooms/MemberTile-test.tsx
+++ b/test/components/views/rooms/MemberTile-test.tsx
@@ -21,7 +21,6 @@ import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
 import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import * as TestUtils from "../../../test-utils";
 import MemberTile from "../../../../src/components/views/rooms/MemberTile";
@@ -37,7 +36,7 @@ describe("MemberTile", () => {
     });
 
     it("should not display an E2EIcon when the e2E status = normal", () => {
-        const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
+        const { container } = render(<MemberTile member={member} />);
 
         expect(container).toMatchSnapshot();
     });
@@ -48,7 +47,7 @@ describe("MemberTile", () => {
             wasCrossSigningVerified: jest.fn().mockReturnValue(true),
         } as unknown as UserVerificationStatus);
 
-        const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
+        const { container } = render(<MemberTile member={member} />);
 
         expect(container).toMatchSnapshot();
         await waitFor(async () => {
@@ -72,7 +71,7 @@ describe("MemberTile", () => {
             crossSigningVerified: true,
         } as DeviceVerificationStatus);
 
-        const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
+        const { container } = render(<MemberTile member={member} />);
 
         expect(container).toMatchSnapshot();
         await waitFor(async () => {
diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx
index f8c6fa159a..1aea150a8c 100644
--- a/test/components/views/rooms/MessageComposer-test.tsx
+++ b/test/components/views/rooms/MessageComposer-test.tsx
@@ -18,7 +18,6 @@ import * as React from "react";
 import { EventType, MatrixEvent, Room, RoomMember, THREAD_RELATION_TYPE } from "matrix-js-sdk/src/matrix";
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import {
     clearAllModals,
@@ -514,7 +513,6 @@ function wrapAndRender(
                     <MessageComposer {...defaultProps} {...props} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         ),
         roomContext,
     };
diff --git a/test/components/views/spaces/ThreadsActivityCentre-test.tsx b/test/components/views/spaces/ThreadsActivityCentre-test.tsx
index 9cc47c93f1..02d37b53af 100644
--- a/test/components/views/spaces/ThreadsActivityCentre-test.tsx
+++ b/test/components/views/spaces/ThreadsActivityCentre-test.tsx
@@ -20,7 +20,6 @@ import React, { ComponentProps } from "react";
 import { getByText, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { ThreadsActivityCentre } from "../../../../src/components/views/spaces/threads-activity-centre";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -49,7 +48,6 @@ describe("ThreadsActivityCentre", () => {
             <MatrixClientContext.Provider value={cli}>
                 <ThreadsActivityCentre {...props} />
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         );
     };
 
@@ -251,7 +249,6 @@ describe("ThreadsActivityCentre", () => {
                     <ThreadsActivityCentre />
                 </MatrixClientContext.Provider>
             </div>,
-            { wrapper: TooltipProvider },
         );
         await userEvent.click(getTACButton());