From 58d92742b4ff6da73e97022984e9d9a1adb32517 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Mon, 26 Aug 2024 08:41:52 +0000
Subject: [PATCH] [MM-60261] Replace "useTooltip" of
 "components/common/hooks/useTooltip" to WithTooltip (#28037)

---
 .../components/common/hooks/useTooltip.tsx    |  148 ---
 .../file_attachment.test.tsx.snap             | 1048 +++++++++--------
 .../file_attachment/archived_tooltip.tsx      |    1 +
 .../file_attachment/file_attachment.tsx       |   47 +-
 .../post_priority_picker_overlay.tsx          |   24 +-
 5 files changed, 575 insertions(+), 693 deletions(-)
 delete mode 100644 webapp/channels/src/components/common/hooks/useTooltip.tsx

diff --git a/webapp/channels/src/components/common/hooks/useTooltip.tsx b/webapp/channels/src/components/common/hooks/useTooltip.tsx
deleted file mode 100644
index a90ede3197..0000000000
--- a/webapp/channels/src/components/common/hooks/useTooltip.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {useHover, useInteractions, useFloating, arrow, offset, autoPlacement} from '@floating-ui/react';
-import type {Strategy, Placement, ReferenceType} from '@floating-ui/react';
-import classNames from 'classnames';
-import type {ReactNode, HTMLProps} from 'react';
-import React, {useState, useRef} from 'react';
-import ReactDOM from 'react-dom';
-
-import {Constants} from 'utils/constants';
-
-interface TooltipOptions {
-    message: ReactNode;
-    strategy?: Strategy;
-    placement: Placement;
-    allowedPlacements?: Placement[];
-    hoverDelay?: Exclude<Parameters<typeof useHover>[1], undefined>['delay'];
-    zIndex?: number;
-    mountPoint?: string | Element;
-}
-
-const defaultOptions: Required<Pick<TooltipOptions, 'strategy' | 'hoverDelay' | 'zIndex' | 'mountPoint'>> = {
-    strategy: 'fixed',
-    hoverDelay: {
-        open: Constants.OVERLAY_TIME_DELAY,
-        close: 0,
-    },
-    zIndex: 1,
-    mountPoint: 'root',
-};
-
-const transitionTime = 150;
-
-interface TooltipReturn {
-    setReference: (node: ReferenceType | null) => void;
-    getReferenceProps: (userProps?: HTMLProps<Element>) => Record<string, unknown>;
-    tooltip: ReactNode;
-}
-
-export default function useTooltip(options: TooltipOptions): TooltipReturn {
-    const [open, setOpen] = useState(false);
-    const [visible, setVisible] = useState(false);
-    const transition = useRef<NodeJS.Timeout>(null);
-    const arrowRef = useRef(null);
-    const effectiveStrategy = options.strategy || defaultOptions.strategy;
-    const effectiveMountpoint = options.mountPoint || defaultOptions.mountPoint;
-    const effectiveAllowedPlacements = options.allowedPlacements ?? [options.placement];
-    const {
-        x,
-        y,
-        strategy,
-        placement,
-        refs: {
-            setReference,
-            setFloating,
-        },
-        middlewareData: {
-            arrow: {
-                x: arrowX,
-                y: arrowY,
-            } = {},
-        },
-        context,
-    } = useFloating({
-        open,
-        onOpenChange: (nowOpen) => {
-            if (transition.current) {
-                clearTimeout(transition.current);
-            }
-            if (nowOpen) {
-                setOpen(nowOpen);
-                setVisible(true);
-            } else {
-                setVisible(false);
-                setTimeout(() => {
-                    setOpen(nowOpen);
-                }, transitionTime);
-            }
-        },
-        middleware: [
-            autoPlacement({
-                allowedPlacements: effectiveAllowedPlacements,
-                autoAlignment: false,
-            }),
-            offset(10),
-            arrow({
-                element: arrowRef,
-                padding: 4,
-            }),
-        ],
-        placement: options.placement,
-        strategy: effectiveStrategy,
-    });
-
-    const {getReferenceProps, getFloatingProps} = useInteractions([
-        useHover(
-            context,
-            {
-                delay: options.hoverDelay || defaultOptions.hoverDelay,
-            },
-        ),
-    ]);
-
-    const content = (
-        <div
-            {...getFloatingProps({
-                ref: setFloating,
-                className: classNames(
-                    'floating-ui-tooltip',
-                    {
-                        'floating-ui-tooltip--visible': visible,
-                    },
-                ),
-                style: {
-                    position: strategy,
-                    top: y ?? 0,
-                    left: x ?? 0,
-                    zIndex: typeof options.zIndex === 'number' ? options.zIndex : defaultOptions.zIndex,
-                },
-            })}
-        >
-            {options.message}
-            <div
-                ref={arrowRef}
-                className='floating-ui-tooltip-arrow'
-                style={placement === 'top' ? {left: arrowX, top: arrowY} : {left: '-4px', top: arrowY}}
-            />
-        </div>
-    );
-
-    let tooltip: ReactNode = false;
-
-    if (open) {
-        if (effectiveStrategy === 'fixed') {
-            tooltip = ReactDOM.createPortal(
-                content,
-                typeof effectiveMountpoint === 'string' ? document.getElementById(effectiveMountpoint) as Element : effectiveMountpoint,
-            );
-        }
-    }
-
-    return {
-        setReference,
-        getReferenceProps,
-        tooltip,
-    };
-}
diff --git a/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap b/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
index 39301daad6..2109ae56ed 100644
--- a/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
+++ b/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
@@ -1,585 +1,641 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FileAttachment should match snapshot, after change from file to image 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.png"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <Connect(Component)
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "png",
-          "has_preview_image": true,
-          "height": 400,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.png",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 600,
-        }
-      }
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.png"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
     >
-      <div
-        className="post-image__detail"
-      >
-        <span
-          className="post-image__name"
-        >
-          test.png
-        </span>
-        <span
-          className="post-image__type"
-        >
-          PNG
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
-      </div>
-    </div>
-    <FilenameOverlay
-      canDownload={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "png",
-          "has_preview_image": true,
-          "height": 400,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.png",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 600,
+      <Connect(Component)
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "png",
+            "has_preview_image": true,
+            "height": 400,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.png",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 600,
+          }
         }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
-    >
-      <i
-        className="icon icon-download-outline"
       />
-    </FilenameOverlay>
+    </a>
+    <div
+      className="post-image__details"
+    >
+      <div
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
+      >
+        <div
+          className="post-image__detail"
+        >
+          <span
+            className="post-image__name"
+          >
+            test.png
+          </span>
+          <span
+            className="post-image__type"
+          >
+            PNG
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
+      </div>
+      <FilenameOverlay
+        canDownload={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "png",
+            "has_preview_image": true,
+            "height": 400,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.png",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 600,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, regular file 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.pdf"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <Connect(Component)
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "pdf",
-          "has_preview_image": true,
-          "height": 80,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.pdf",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 100,
-        }
-      }
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.pdf"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
     >
-      <div
-        className="post-image__detail"
-      >
-        <span
-          className="post-image__name"
-        >
-          test.pdf
-        </span>
-        <span
-          className="post-image__type"
-        >
-          PDF
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
-      </div>
-    </div>
-    <FilenameOverlay
-      canDownload={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "pdf",
-          "has_preview_image": true,
-          "height": 80,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.pdf",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 100,
+      <Connect(Component)
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "pdf",
+            "has_preview_image": true,
+            "height": 80,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.pdf",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 100,
+          }
         }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
-    >
-      <i
-        className="icon icon-download-outline"
       />
-    </FilenameOverlay>
+    </a>
+    <div
+      className="post-image__details"
+    >
+      <div
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
+      >
+        <div
+          className="post-image__detail"
+        >
+          <span
+            className="post-image__name"
+          >
+            test.pdf
+          </span>
+          <span
+            className="post-image__type"
+          >
+            PDF
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
+      </div>
+      <FilenameOverlay
+        canDownload={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "pdf",
+            "has_preview_image": true,
+            "height": 80,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.pdf",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 100,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, regular image 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.png"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <div
-      className="post-image__load"
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.png"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
     >
       <div
-        className="post-image__detail"
-      >
-        <span
-          className="post-image__name"
-        >
-          test.png
-        </span>
-        <span
-          className="post-image__type"
-        >
-          PNG
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
-      </div>
-    </div>
-    <FilenameOverlay
-      canDownload={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "png",
-          "has_preview_image": true,
-          "height": 400,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.png",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 600,
-        }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
-    >
-      <i
-        className="icon icon-download-outline"
+        className="post-image__load"
       />
-    </FilenameOverlay>
+    </a>
+    <div
+      className="post-image__details"
+    >
+      <div
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
+      >
+        <div
+          className="post-image__detail"
+        >
+          <span
+            className="post-image__name"
+          >
+            test.png
+          </span>
+          <span
+            className="post-image__type"
+          >
+            PNG
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
+      </div>
+      <FilenameOverlay
+        canDownload={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "png",
+            "has_preview_image": true,
+            "height": 400,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.png",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 600,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, small image 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.png"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <div
-      className="post-image__load"
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.png"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
     >
       <div
-        className="post-image__detail"
-      >
-        <span
-          className="post-image__name"
-        >
-          test.png
-        </span>
-        <span
-          className="post-image__type"
-        >
-          PNG
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
-      </div>
-    </div>
-    <FilenameOverlay
-      canDownload={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "png",
-          "has_preview_image": true,
-          "height": 16,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.png",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 16,
-        }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
-    >
-      <i
-        className="icon icon-download-outline"
+        className="post-image__load"
       />
-    </FilenameOverlay>
+    </a>
+    <div
+      className="post-image__details"
+    >
+      <div
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
+      >
+        <div
+          className="post-image__detail"
+        >
+          <span
+            className="post-image__name"
+          >
+            test.png
+          </span>
+          <span
+            className="post-image__type"
+          >
+            PNG
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
+      </div>
+      <FilenameOverlay
+        canDownload={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "png",
+            "has_preview_image": true,
+            "height": 16,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.png",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 16,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, svg image 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.svg"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <Connect(Component)
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "svg",
-          "has_preview_image": true,
-          "height": 400,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.svg",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 600,
-        }
-      }
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.svg"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
     >
-      <div
-        className="post-image__detail"
-      >
-        <span
-          className="post-image__name"
-        >
-          test.svg
-        </span>
-        <span
-          className="post-image__type"
-        >
-          SVG
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
-      </div>
-    </div>
-    <FilenameOverlay
-      canDownload={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "svg",
-          "has_preview_image": true,
-          "height": 400,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.svg",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 600,
+      <Connect(Component)
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "svg",
+            "has_preview_image": true,
+            "height": 400,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.svg",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 600,
+          }
         }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
-    >
-      <i
-        className="icon icon-download-outline"
       />
-    </FilenameOverlay>
+    </a>
+    <div
+      className="post-image__details"
+    >
+      <div
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
+      >
+        <div
+          className="post-image__detail"
+        >
+          <span
+            className="post-image__name"
+          >
+            test.svg
+          </span>
+          <span
+            className="post-image__type"
+          >
+            SVG
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
+      </div>
+      <FilenameOverlay
+        canDownload={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "svg",
+            "has_preview_image": true,
+            "height": 400,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.svg",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 600,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, when file is not loaded 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.pdf"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <div
-      className="post-image__load"
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.pdf"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
     >
       <div
-        className="post-image__detail"
-      >
-        <span
-          className="post-image__name"
-        >
-          test.pdf
-        </span>
-        <span
-          className="post-image__type"
-        >
-          JPG
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
-      </div>
-    </div>
-    <FilenameOverlay
-      canDownload={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "jpg",
-          "has_preview_image": true,
-          "height": 80,
-          "id": "noLoad",
-          "mime_type": "",
-          "name": "test.pdf",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 100,
-        }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
-    >
-      <i
-        className="icon icon-download-outline"
+        className="post-image__load"
       />
-    </FilenameOverlay>
+    </a>
+    <div
+      className="post-image__details"
+    >
+      <div
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
+      >
+        <div
+          className="post-image__detail"
+        >
+          <span
+            className="post-image__name"
+          >
+            test.pdf
+          </span>
+          <span
+            className="post-image__type"
+          >
+            JPG
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
+      </div>
+      <FilenameOverlay
+        canDownload={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "jpg",
+            "has_preview_image": true,
+            "height": 80,
+            "id": "noLoad",
+            "mime_type": "",
+            "name": "test.pdf",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 100,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, with compact display 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <FilenameOverlay
-      canDownload={true}
-      compactDisplay={true}
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "pdf",
-          "has_preview_image": true,
-          "height": 80,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.pdf",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 100,
-        }
-      }
-      handleImageClick={[Function]}
-      iconClass="post-image__download"
+    <div
+      className="post-image__details"
     >
-      <i
-        className="icon icon-download-outline"
-      />
-    </FilenameOverlay>
+      <FilenameOverlay
+        canDownload={true}
+        compactDisplay={true}
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "pdf",
+            "has_preview_image": true,
+            "height": 80,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.pdf",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 100,
+          }
+        }
+        handleImageClick={[Function]}
+        iconClass="post-image__download"
+      >
+        <i
+          className="icon icon-download-outline"
+        />
+      </FilenameOverlay>
+    </div>
   </div>
-</div>
+</WithTooltip>
 `;
 
 exports[`FileAttachment should match snapshot, without compact display and without can download 1`] = `
-<div
-  className="post-image__column"
+<WithTooltip
+  disabled={true}
+  id="fileAttachmentArchivedTooltip"
+  placement="top"
+  title={<ArchivedTooltip />}
 >
-  <a
-    aria-label="file thumbnail test.pdf"
-    className="post-image__thumbnail"
-    href="#"
-    onClick={[Function]}
-  >
-    <Connect(Component)
-      fileInfo={
-        Object {
-          "archived": false,
-          "clientId": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "extension": "pdf",
-          "has_preview_image": true,
-          "height": 80,
-          "id": "thumbnail_id",
-          "mime_type": "",
-          "name": "test.pdf",
-          "size": 100,
-          "update_at": 0,
-          "user_id": "",
-          "width": 100,
-        }
-      }
-    />
-  </a>
   <div
-    className="post-image__details"
+    className="post-image__column"
   >
-    <div
-      className="post-image__detail_wrapper"
+    <a
+      aria-label="file thumbnail test.pdf"
+      className="post-image__thumbnail"
+      href="#"
       onClick={[Function]}
+    >
+      <Connect(Component)
+        fileInfo={
+          Object {
+            "archived": false,
+            "clientId": "",
+            "create_at": 0,
+            "delete_at": 0,
+            "extension": "pdf",
+            "has_preview_image": true,
+            "height": 80,
+            "id": "thumbnail_id",
+            "mime_type": "",
+            "name": "test.pdf",
+            "size": 100,
+            "update_at": 0,
+            "user_id": "",
+            "width": 100,
+          }
+        }
+      />
+    </a>
+    <div
+      className="post-image__details"
     >
       <div
-        className="post-image__detail"
+        className="post-image__detail_wrapper"
+        onClick={[Function]}
       >
-        <span
-          className="post-image__name"
+        <div
+          className="post-image__detail"
         >
-          test.pdf
-        </span>
-        <span
-          className="post-image__type"
-        >
-          PDF
-        </span>
-        <span
-          className="post-image__size"
-        >
-          100B
-        </span>
+          <span
+            className="post-image__name"
+          >
+            test.pdf
+          </span>
+          <span
+            className="post-image__type"
+          >
+            PDF
+          </span>
+          <span
+            className="post-image__size"
+          >
+            100B
+          </span>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</WithTooltip>
 `;
diff --git a/webapp/channels/src/components/file_attachment/archived_tooltip.tsx b/webapp/channels/src/components/file_attachment/archived_tooltip.tsx
index ade4de043e..b73107d377 100644
--- a/webapp/channels/src/components/file_attachment/archived_tooltip.tsx
+++ b/webapp/channels/src/components/file_attachment/archived_tooltip.tsx
@@ -10,6 +10,7 @@ import {asGBString} from 'utils/limits';
 
 export default function ArchivedTooltip() {
     const intl = useIntl();
+
     return (
         <>
             <div className='post-image__archived-tooltip-title'>
diff --git a/webapp/channels/src/components/file_attachment/file_attachment.tsx b/webapp/channels/src/components/file_attachment/file_attachment.tsx
index a6f63924ff..9327962b9c 100644
--- a/webapp/channels/src/components/file_attachment/file_attachment.tsx
+++ b/webapp/channels/src/components/file_attachment/file_attachment.tsx
@@ -10,7 +10,6 @@ import type {FileInfo} from '@mattermost/types/files';
 
 import {getFileThumbnailUrl, getFileUrl} from 'mattermost-redux/utils/file_utils';
 
-import useTooltip from 'components/common/hooks/useTooltip';
 import GetPublicModal from 'components/get_public_link_modal';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
@@ -65,16 +64,6 @@ export default function FileAttachment(props: Props) {
     const [keepOpen, setKeepOpen] = useState(false);
     const [openUp, setOpenUp] = useState(false);
 
-    const {
-        setReference,
-        getReferenceProps,
-        tooltip: archivedTooltip,
-    } = useTooltip({
-        message: <ArchivedTooltip/>,
-        placement: 'right',
-        allowedPlacements: ['right', 'top'],
-    });
-
     const buttonRef = useRef<HTMLButtonElement | null>(null);
 
     const handleImageLoaded = () => {
@@ -368,18 +357,19 @@ export default function FileAttachment(props: Props) {
             </span>);
     }
 
-    const content =
-        (
+    return (
+        <WithTooltip
+            id='fileAttachmentArchivedTooltip'
+            placement='top'
+            title={<ArchivedTooltip/>}
+            disabled={!fileInfo.archived}
+        >
             <div
-                ref={fileInfo.archived ? setReference : undefined}
-                {...(fileInfo.archived ? getReferenceProps() : {})}
-                className={
-                    classNames([
-                        'post-image__column',
-                        {'keep-open': keepOpen},
-                        {'post-image__column--archived': fileInfo.archived},
-                    ])
-                }
+                className={classNames([
+                    'post-image__column',
+                    {'keep-open': keepOpen},
+                    {'post-image__column--archived': fileInfo.archived},
+                ])}
             >
                 {fileThumbnail}
                 <div className='post-image__details'>
@@ -388,15 +378,6 @@ export default function FileAttachment(props: Props) {
                     {filenameOverlay}
                 </div>
             </div>
-        );
-
-    if (fileInfo.archived) {
-        return (
-            <>
-                {content}
-                {archivedTooltip}
-            </>
-        );
-    }
-    return content;
+        </WithTooltip>
+    );
 }
diff --git a/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx b/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx
index b3eed8dcae..ddefc450d0 100644
--- a/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx
+++ b/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx
@@ -22,7 +22,7 @@ import {AlertCircleOutlineIcon} from '@mattermost/compass-icons/components';
 import type {PostPriorityMetadata} from '@mattermost/types/posts';
 
 import {IconContainer} from 'components/advanced_text_editor/formatting_bar/formatting_icon';
-import useTooltip from 'components/common/hooks/useTooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import PostPriorityPicker from './post_priority_picker';
 
@@ -42,16 +42,6 @@ function PostPriorityPickerOverlay({
     const [pickerOpen, setPickerOpen] = useState(false);
     const {formatMessage} = useIntl();
 
-    const messagePriority = formatMessage({id: 'shortcuts.msgs.formatting_bar.post_priority', defaultMessage: 'Message priority'});
-    const {
-        setReference: setTooltipRef,
-        getReferenceProps: getTooltipReferenceProps,
-        tooltip,
-    } = useTooltip({
-        placement: 'top',
-        message: messagePriority,
-    });
-
     const handleClose = useCallback(() => {
         setPickerOpen(false);
         onClose();
@@ -91,11 +81,14 @@ function PostPriorityPickerOverlay({
         useRole(pickerContext),
     ]);
 
+    const messagePriority = formatMessage({id: 'shortcuts.msgs.formatting_bar.post_priority', defaultMessage: 'Message priority'});
+
     return (
         <>
-            <div
-                ref={setTooltipRef}
-                {...getTooltipReferenceProps()}
+            <WithTooltip
+                id='postPriorityPickerOverlayTooltip'
+                placement='top'
+                title={messagePriority}
             >
                 <IconContainer
                     id='messagePriority'
@@ -111,7 +104,7 @@ function PostPriorityPickerOverlay({
                         color='currentColor'
                     />
                 </IconContainer>
-            </div>
+            </WithTooltip>
             <FloatingPortal id='root-portal'>
                 {pickerOpen && (
                     <FloatingFocusManager
@@ -140,7 +133,6 @@ function PostPriorityPickerOverlay({
                     </FloatingFocusManager>
                 )}
             </FloatingPortal>
-            {!pickerOpen && tooltip}
         </>
     );
 }