Use new compound tooltip

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}

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>
         );
 

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 ? (

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>