Unfloat the MiniAvatarUploader "tooltip"

res/css/views/elements/_MiniAvatarUploader.scss

@@ -18,6 +18,16 @@ limitations under the License.
     position: relative;
     width: min-content;
 
+    // this isn't a floating tooltip so override some things to not need to bother with z-index and floating
+    .mx_Tooltip {
+        display: inline-block;
+        position: absolute;
+        z-index: unset;
+        width: max-content;
+        left: 72px;
+        top: 0;
+    }
+
     &::before, &::after {
         content: '';
         position: absolute;

src/components/views/elements/MiniAvatarUploader.tsx

@@ -19,7 +19,6 @@ import {EventType} from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip from './Tooltip';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useTimeout} from "../../../hooks/useTimeout";
 import Analytics from "../../../Analytics";
@@ -56,6 +55,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
     const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
     if (!canSetAvatar) return children;
 
+    const visible = !!label && (hover || show);
     return <React.Fragment>
         <input
             type="file"
@@ -88,11 +88,13 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
         >
             { children }
 
-            <Tooltip
+            <div className={classNames("mx_Tooltip", {
-                label={label}
+                "mx_Tooltip_visible": visible,
-                visible={!!label && (hover || show)}
+                "mx_Tooltip_invisible": !visible,
-                forceOnRight
+            })}>
-            />
+                <div className="mx_Tooltip_chevron" />
+                { label }
+            </div>
         </AccessibleButton>
     </React.Fragment>;
 };