From ad5d5f08dc48e9ebed57f18382376ac6b2d609f5 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Thu, 22 Aug 2024 13:58:12 +0000
Subject: [PATCH] [MM-60216] Migrate tooltips of admin_consoles
 "admin_settings", "schema_admin_settings" & "permission_description" to
 WithTooltip (#28003)

---
 .../bleve_settings.test.tsx.snap              |  76 ++-
 .../cluster_settings.test.tsx.snap            | 152 +++--
 .../database_settings.test.tsx.snap           |  38 +-
 .../elasticsearch_settings.test.tsx.snap      |  76 ++-
 .../message_export_settings.test.tsx.snap     | 152 +++--
 .../__snapshots__/push_settings.test.tsx.snap |  76 ++-
 .../schema_admin_settings.test.tsx.snap       |  45 +-
 .../admin_console/admin_settings.tsx          |  53 +-
 .../custom_plugin_settings.test.tsx.snap      | 135 ++---
 ...om_terms_of_service_settings.test.tsx.snap | 152 +++--
 .../admin_console/message_export_settings.tsx |   1 -
 .../permission_description.test.tsx.snap      | 226 ++++---
 .../permission_description.tsx                |  66 +-
 .../plugin_management.test.tsx.snap           | 570 +++++++++---------
 .../admin_console/schema_admin_settings.tsx   |  59 +-
 .../src/sass/components/_permissions.scss     |   1 +
 .../src/utils/position_utils.test.tsx         |  27 +-
 webapp/channels/src/utils/position_utils.tsx  |  14 -
 18 files changed, 895 insertions(+), 1024 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
index a67c941a51..5729db13f0 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
@@ -215,29 +215,27 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -458,29 +456,27 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
index bd41a27512..5252d6dd93 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
@@ -234,29 +234,27 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -496,29 +494,27 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -758,29 +754,27 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -1020,29 +1014,27 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
index 18986a536b..d9cfebf403 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
@@ -430,29 +430,27 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
index 3e49d33294..5912590db2 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
@@ -538,29 +538,27 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -1103,29 +1101,27 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
index 12155d7a06..0c30f68f8b 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
@@ -144,29 +144,27 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -430,29 +428,27 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -602,29 +598,27 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -888,29 +882,27 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
index d0d6d71e77..06065b8eb6 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
@@ -164,29 +164,27 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -300,29 +298,27 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
index 2468488d28..4588d6848d 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
@@ -710,34 +710,27 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
       saving={false}
       savingMessage="Saving Config..."
     />
-    <div
-      className="error-message"
-      data-testid="errorMessage"
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-    >
-      <FormError
-        error=""
-        errors={Array []}
-        iconClassName="fa-exclamation-triangle"
-        textClassName="has-warning"
-      />
-      <FormError
-        error={null}
-        errors={Array []}
-      />
-    </div>
-    <Overlay
-      animation={[Function]}
+    <WithTooltip
+      id="error-tooltip"
       placement="top"
-      rootClose={false}
-      show={false}
-      target={null}
+      title=""
     >
-      <Tooltip
-        id="error-tooltip"
-      />
-    </Overlay>
+      <div
+        className="error-message"
+        data-testid="errorMessage"
+      >
+        <FormError
+          error=""
+          errors={Array []}
+          iconClassName="fa-exclamation-triangle"
+          textClassName="has-warning"
+        />
+        <FormError
+          error={null}
+          errors={Array []}
+        />
+      </div>
+    </WithTooltip>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/admin_console/admin_settings.tsx b/webapp/channels/src/components/admin_console/admin_settings.tsx
index ccdba2f255..8fe14e7d0e 100644
--- a/webapp/channels/src/components/admin_console/admin_settings.tsx
+++ b/webapp/channels/src/components/admin_console/admin_settings.tsx
@@ -2,17 +2,15 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Overlay} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
 
 import type {AdminConfig, EnvironmentConfig} from '@mattermost/types/config';
 import type {DeepPartial} from '@mattermost/types/utilities';
 
 import FormError from 'components/form_error';
 import SaveButton from 'components/save_button';
-import Tooltip from 'components/tooltip';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
-
-import {localizeMessage} from 'utils/utils';
+import WithTooltip from 'components/with_tooltip';
 
 export type BaseProps = {
     config?: DeepPartial<AdminConfig>;
@@ -27,7 +25,6 @@ export type BaseState = {
     saving: boolean;
     serverError: string|null;
     serverErrorId?: string;
-    errorTooltip: boolean;
 }
 
 // Placeholder type until ClientError is exported from redux.
@@ -38,21 +35,18 @@ type ClientErrorPlaceholder = {
 }
 
 export default abstract class AdminSettings <Props extends BaseProps, State extends BaseState> extends React.Component<Props, State> {
-    private errorMessageRef: React.RefObject<HTMLDivElement>;
     public constructor(props: Props) {
         super(props);
         const stateInit = {
             saveNeeded: false,
             saving: false,
             serverError: null,
-            errorTooltip: false,
         };
         if (props.config) {
             this.state = Object.assign(this.getStateFromConfig(props.config), stateInit) as Readonly<State>;
         } else {
             this.state = stateInit as Readonly<State>;
         }
-        this.errorMessageRef = React.createRef();
     }
 
     protected abstract getStateFromConfig(config: DeepPartial<AdminConfig>): Partial<State>;
@@ -67,18 +61,6 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
 
     protected canSave?: () => boolean;
 
-    private closeTooltip = () => {
-        this.setState({errorTooltip: false});
-    };
-
-    private openTooltip = (e: React.MouseEvent) => {
-        const elm: HTMLElement|null = e.currentTarget.querySelector('.control-label');
-        if (elm) {
-            const isElipsis = elm.offsetWidth < elm.scrollWidth;
-            this.setState({errorTooltip: isElipsis});
-        }
-    };
-
     protected handleChange = (id: string, value: unknown) => {
         this.setState((prevState) => ({
             ...prevState,
@@ -249,25 +231,24 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
                             saving={this.state.saving}
                             disabled={this.props.isDisabled || !this.state.saveNeeded || (this.canSave && !this.canSave())}
                             onClick={this.handleSubmit}
-                            savingMessage={localizeMessage('admin.saving', 'Saving Config...')}
+                            savingMessage={
+                                <FormattedMessage
+                                    id='admin.saving'
+                                    defaultMessage='Saving Config...'
+                                />
+                            }
                         />
-                        <div
-                            className='error-message'
-                            ref={this.errorMessageRef}
-                            onMouseOver={this.openTooltip}
-                            onMouseOut={this.closeTooltip}
-                        >
-                            <FormError error={this.state.serverError}/>
-                        </div>
-                        <Overlay
-                            show={this.state.errorTooltip}
+                        <WithTooltip
+                            id='error-tooltip'
                             placement='top'
-                            target={this.errorMessageRef.current as HTMLElement}
+                            title={this.state?.serverError ?? ''}
                         >
-                            <Tooltip id='error-tooltip' >
-                                {this.state.serverError}
-                            </Tooltip>
-                        </Overlay>
+                            <div
+                                className='error-message'
+                            >
+                                <FormError error={this.state.serverError}/>
+                            </div>
+                        </WithTooltip>
                     </div>
                 </div>
             </form>
diff --git a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
index e7b238bef6..d3ae8581c9 100644
--- a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
@@ -191,34 +191,27 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       saving={false}
       savingMessage="Saving Config..."
     />
-    <div
-      className="error-message"
-      data-testid="errorMessage"
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-    >
-      <FormError
-        error=""
-        errors={Array []}
-        iconClassName="fa-exclamation-triangle"
-        textClassName="has-warning"
-      />
-      <FormError
-        error={null}
-        errors={Array []}
-      />
-    </div>
-    <Overlay
-      animation={[Function]}
+    <WithTooltip
+      id="error-tooltip"
       placement="top"
-      rootClose={false}
-      show={false}
-      target={null}
+      title=""
     >
-      <Tooltip
-        id="error-tooltip"
-      />
-    </Overlay>
+      <div
+        className="error-message"
+        data-testid="errorMessage"
+      >
+        <FormError
+          error=""
+          errors={Array []}
+          iconClassName="fa-exclamation-triangle"
+          textClassName="has-warning"
+        />
+        <FormError
+          error={null}
+          errors={Array []}
+        />
+      </div>
+    </WithTooltip>
   </div>
 </div>
 `;
@@ -252,34 +245,27 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       saving={false}
       savingMessage="Saving Config..."
     />
-    <div
-      className="error-message"
-      data-testid="errorMessage"
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-    >
-      <FormError
-        error=""
-        errors={Array []}
-        iconClassName="fa-exclamation-triangle"
-        textClassName="has-warning"
-      />
-      <FormError
-        error={null}
-        errors={Array []}
-      />
-    </div>
-    <Overlay
-      animation={[Function]}
+    <WithTooltip
+      id="error-tooltip"
       placement="top"
-      rootClose={false}
-      show={false}
-      target={null}
+      title=""
     >
-      <Tooltip
-        id="error-tooltip"
-      />
-    </Overlay>
+      <div
+        className="error-message"
+        data-testid="errorMessage"
+      >
+        <FormError
+          error=""
+          errors={Array []}
+          iconClassName="fa-exclamation-triangle"
+          textClassName="has-warning"
+        />
+        <FormError
+          error={null}
+          errors={Array []}
+        />
+      </div>
+    </WithTooltip>
   </div>
 </div>
 `;
@@ -475,34 +461,27 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       saving={false}
       savingMessage="Saving Config..."
     />
-    <div
-      className="error-message"
-      data-testid="errorMessage"
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-    >
-      <FormError
-        error=""
-        errors={Array []}
-        iconClassName="fa-exclamation-triangle"
-        textClassName="has-warning"
-      />
-      <FormError
-        error={null}
-        errors={Array []}
-      />
-    </div>
-    <Overlay
-      animation={[Function]}
+    <WithTooltip
+      id="error-tooltip"
       placement="top"
-      rootClose={false}
-      show={false}
-      target={null}
+      title=""
     >
-      <Tooltip
-        id="error-tooltip"
-      />
-    </Overlay>
+      <div
+        className="error-message"
+        data-testid="errorMessage"
+      >
+        <FormError
+          error=""
+          errors={Array []}
+          iconClassName="fa-exclamation-triangle"
+          textClassName="has-warning"
+        />
+        <FormError
+          error={null}
+          errors={Array []}
+        />
+      </div>
+    </WithTooltip>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
index 9ac662868a..3d599f192e 100644
--- a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
@@ -23,29 +23,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -74,29 +72,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -125,29 +121,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -176,29 +170,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/message_export_settings.tsx b/webapp/channels/src/components/admin_console/message_export_settings.tsx
index 836683f181..950659fef3 100644
--- a/webapp/channels/src/components/admin_console/message_export_settings.tsx
+++ b/webapp/channels/src/components/admin_console/message_export_settings.tsx
@@ -110,7 +110,6 @@ export class MessageExportSettings extends AdminSettings<BaseProps & WrappedComp
             saveNeeded: false,
             saving: false,
             serverError: null,
-            errorTooltip: false,
         };
         if (config.MessageExportSettings.GlobalRelaySettings) {
             state.globalRelayCustomerType = config.MessageExportSettings.GlobalRelaySettings.CustomerType;
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
index e42e6add63..c67bc90680 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
@@ -23,52 +23,130 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
     }
     selectRow={[MockFunction]}
   >
-    <span
-      className="permission-description"
-      onClick={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-    >
-      <span
-        className="inherit-link-wrapper"
-      >
-        <FormattedMessage
-          defaultMessage="Inherited from <link>{name}</link>."
-          id="admin.permissions.inherited_from"
-          values={
-            Object {
-              "link": [Function],
-              "name": "All Members",
+    <WithTooltip
+      disabled={false}
+      id="defaultID"
+      placement="top"
+      title={
+        <span
+          className="inherit-link-wrapper"
+        >
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Inherited from <link>{name}</link>."
+            id="admin.permissions.inherited_from"
+            values={
+              Object {
+                "link": [Function],
+                "name": "All Members",
+              }
             }
+          />
+        </span>
+      }
+    >
+      <OverlayTrigger
+        defaultOverlayShown={false}
+        delay={400}
+        disabled={false}
+        overlay={<Unknown />}
+        placement="top"
+        trigger={
+          Array [
+            "hover",
+            "focus",
+          ]
+        }
+      >
+        <OverlayTrigger
+          defaultOverlayShown={false}
+          delay={400}
+          overlay={
+            <OverlayWrapper
+              intl={
+                Object {
+                  "$t": [Function],
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
+                  "formatDate": [Function],
+                  "formatDateTimeRange": [Function],
+                  "formatDateToParts": [Function],
+                  "formatDisplayName": [Function],
+                  "formatList": [Function],
+                  "formatListToParts": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatNumberToParts": [Function],
+                  "formatPlural": [Function],
+                  "formatRelativeTime": [Function],
+                  "formatTime": [Function],
+                  "formatTimeToParts": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getDisplayNames": [Function],
+                    "getListFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralRules": [Function],
+                    "getRelativeTimeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": Object {},
+                  "onError": [Function],
+                  "onWarn": [Function],
+                  "textComponent": "span",
+                  "timeZone": "Etc/UTC",
+                  "wrapRichTextChunksInFragment": undefined,
+                }
+              }
+            />
+          }
+          placement="top"
+          trigger={
+            Array [
+              "hover",
+              "focus",
+            ]
           }
         >
-          <span>
-            Inherited from 
-            <a
-              key=".$.1"
+          <span
+            className="permission-description"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <span
+              className="inherit-link-wrapper"
             >
-              All Members
-            </a>
-            .
+              <FormattedMessage
+                defaultMessage="Inherited from <link>{name}</link>."
+                id="admin.permissions.inherited_from"
+                values={
+                  Object {
+                    "link": [Function],
+                    "name": "All Members",
+                  }
+                }
+              >
+                <span>
+                  Inherited from 
+                  <a
+                    key=".$.1"
+                  >
+                    All Members
+                  </a>
+                  .
+                </span>
+              </FormattedMessage>
+            </span>
           </span>
-        </FormattedMessage>
-      </span>
-      <Overlay
-        animation={[Function]}
-        placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
-      >
-        <Overlay
-          placement="top"
-          rootClose={false}
-          show={false}
-          target={null}
-          transition={[Function]}
-        />
-      </Overlay>
-    </span>
+        </OverlayTrigger>
+      </OverlayTrigger>
+    </WithTooltip>
   </PermissionDescription>
 </Provider>
 `;
@@ -119,49 +197,39 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
 `;
 
 exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with clickable link 1`] = `
-<span
-  className="permission-description"
-  onClick={[Function]}
-  onMouseOut={[Function]}
-  onMouseOver={[Function]}
+<WithTooltip
+  disabled={false}
+  id="defaultID"
+  placement="top"
+  title={
+    <span>
+      This is a clickable description
+    </span>
+  }
 >
-  <span>
-    This is a clickable description
-  </span>
-  <Overlay
-    animation={[Function]}
-    placement="top"
-    rootClose={false}
-    show={false}
-    target={null}
+  <span
+    className="permission-description"
+    onClick={[Function]}
   >
-    <Tooltip>
-      <span>
-        This is a clickable description
-      </span>
-    </Tooltip>
-  </Overlay>
-</span>
+    <span>
+      This is a clickable description
+    </span>
+  </span>
+</WithTooltip>
 `;
 
 exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with default Props 1`] = `
-<span
-  className="permission-description"
-  onClick={[Function]}
-  onMouseOut={[Function]}
-  onMouseOver={[Function]}
+<WithTooltip
+  disabled={false}
+  id="defaultID"
+  placement="top"
+  title="This is the description"
 >
-  This is the description
-  <Overlay
-    animation={[Function]}
-    placement="top"
-    rootClose={false}
-    show={false}
-    target={null}
+  <span
+    className="permission-description"
+    onClick={[Function]}
   >
-    <Tooltip>
-      This is the description
-    </Tooltip>
-  </Overlay>
-</span>
+    This is the description
+  </span>
+</WithTooltip>
 `;
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
index c6f6085d62..a1bda1250f 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
@@ -1,14 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState, useRef} from 'react';
+import React from 'react';
 import type {MouseEvent} from 'react';
-import {Overlay} from 'react-bootstrap';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {Role} from '@mattermost/types/roles';
 
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import type {AdditionalValues} from './permissions_tree/types';
 import {rolesRolesStrings} from './strings/roles';
@@ -28,17 +27,7 @@ const PermissionDescription = ({
     additionalValues,
     inherited,
 }: Props): JSX.Element => {
-    const [open, setOpen] = useState(false);
-    const contentRef = useRef<HTMLSpanElement>(null);
-    const intl = useIntl();
-
-    const closeTooltip = () => setOpen(false);
-
-    const openTooltip = (e: MouseEvent) => {
-        const elm = e.currentTarget.querySelector('span');
-        const isElipsis = elm ? elm.offsetWidth < elm.scrollWidth : false;
-        setOpen(isElipsis);
-    };
+    const {formatMessage} = useIntl();
 
     const parentPermissionClicked = (e: MouseEvent) => {
         const parent = (e.target as HTMLSpanElement).parentElement;
@@ -53,7 +42,7 @@ const PermissionDescription = ({
 
     let content: string | JSX.Element = '';
     if (inherited && inherited.name) {
-        const formattedName = intl.formatMessage(rolesRolesStrings[inherited.name]);
+        const formattedName = formatMessage(rolesRolesStrings[inherited.name]);
         content = (
             <span className='inherit-link-wrapper'>
                 <FormattedMessage
@@ -71,34 +60,27 @@ const PermissionDescription = ({
     } else {
         content = description;
     }
-    let tooltip: JSX.Element | null = (
-        <Overlay
-            show={open}
-            placement='top'
-            target={(contentRef.current as HTMLSpanElement)}
-        >
-            <Tooltip>
-                {content}
-            </Tooltip>
-        </Overlay>
-    );
-    if (!inherited && additionalValues) {
-        tooltip = null;
-    }
-    content = (
-        <span
-            className='permission-description'
-            onClick={parentPermissionClicked}
-            ref={contentRef}
-            onMouseOver={openTooltip}
-            onMouseOut={closeTooltip}
-        >
-            {content}
-            {tooltip}
-        </span>
-    );
 
-    return content;
+    let showTooltip = true;
+    if (!inherited && additionalValues) {
+        showTooltip = false;
+    }
+
+    return (
+        <WithTooltip
+            id={id}
+            placement='top'
+            title={content}
+            disabled={!showTooltip}
+        >
+            <span
+                className='permission-description'
+                onClick={parentPermissionClicked}
+            >
+                {content}
+            </span>
+        </WithTooltip>
+    );
 };
 
 export default PermissionDescription;
diff --git a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
index 651dca0cce..6bf1454c1e 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
@@ -312,29 +312,27 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -652,29 +650,27 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -740,29 +736,27 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -1080,29 +1074,27 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -1422,29 +1414,27 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -1766,29 +1756,27 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -2106,29 +2094,27 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -2423,29 +2409,27 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -2763,29 +2747,27 @@ exports[`components/PluginManagement should match snapshot, text entered into th
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -3110,29 +3092,27 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -3513,29 +3493,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -3884,29 +3862,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -4255,29 +4231,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -4626,29 +4600,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
@@ -5029,29 +5001,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         disabled={true}
         onClick={[Function]}
         saving={false}
-        savingMessage="Saving Config..."
+        savingMessage={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Saving Config..."
+            id="admin.saving"
+          />
+        }
       />
-      <div
-        className="error-message"
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-      >
-        <FormError
-          error={null}
-          errors={Array []}
-        />
-      </div>
-      <Overlay
-        animation={[Function]}
+      <WithTooltip
+        id="error-tooltip"
         placement="top"
-        rootClose={false}
-        show={false}
-        target={null}
+        title=""
       >
-        <Tooltip
-          id="error-tooltip"
-        />
-      </Overlay>
+        <div
+          className="error-message"
+        >
+          <FormError
+            error={null}
+            errors={Array []}
+          />
+        </div>
+      </WithTooltip>
     </div>
   </div>
 </form>
diff --git a/webapp/channels/src/components/admin_console/schema_admin_settings.tsx b/webapp/channels/src/components/admin_console/schema_admin_settings.tsx
index fb362556c6..fc80d1b330 100644
--- a/webapp/channels/src/components/admin_console/schema_admin_settings.tsx
+++ b/webapp/channels/src/components/admin_console/schema_admin_settings.tsx
@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Overlay} from 'react-bootstrap';
 import {FormattedMessage, injectIntl} from 'react-intl';
 import type {IntlShape, MessageDescriptor, WrappedComponentProps} from 'react-intl';
 import {Link} from 'react-router-dom';
@@ -31,9 +30,9 @@ import UserAutocompleteSetting from 'components/admin_console/user_autocomplete_
 import FormError from 'components/form_error';
 import Markdown from 'components/markdown';
 import SaveButton from 'components/save_button';
-import Tooltip from 'components/tooltip';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 import WarningIcon from 'components/widgets/icons/fa_warning_icon';
+import WithTooltip from 'components/with_tooltip';
 
 import * as I18n from 'i18n/i18n.jsx';
 import Constants from 'utils/constants';
@@ -67,7 +66,6 @@ type State = {
     saveNeeded: false | 'both' | 'permissions' | 'config';
     saving: boolean;
     serverError: null;
-    errorTooltip: boolean;
     customComponentWrapperClass: string;
     confirmNeededId: string;
     showConfirmId: string;
@@ -99,7 +97,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
     private isPlugin: boolean;
     private saveActions: Array<() => Promise<{error?: {message?: string}}>>;
     private buildSettingFunctions: {[x: string]: (setting: any) => JSX.Element};
-    private errorMessageRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Props) {
         super(props);
@@ -130,13 +127,11 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
             saveNeeded: false,
             saving: false,
             serverError: null,
-            errorTooltip: false,
             customComponentWrapperClass: '',
             confirmNeededId: '',
             showConfirmId: '',
             clientWarning: '',
         };
-        this.errorMessageRef = React.createRef();
     }
 
     static getDerivedStateFromProps(props: Props, state: State) {
@@ -146,7 +141,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
                 saveNeeded: false,
                 saving: false,
                 serverError: null,
-                errorTooltip: false,
                 ...SchemaAdminSettings.getStateFromConfig(props.config, props.schema, props.roles),
             };
         }
@@ -1155,19 +1149,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
         return null;
     };
 
-    closeTooltip = () => {
-        this.setState({errorTooltip: false});
-    };
-
-    openTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
-        const elm = e.currentTarget.querySelector<HTMLLabelElement>('.control-label');
-        if (!elm) {
-            return;
-        }
-        const isElipsis = elm.offsetWidth < elm.scrollWidth;
-        this.setState({errorTooltip: isElipsis});
-    };
-
     doSubmit = async (getStateFromConfig: (config: Partial<AdminConfig>, schema: AdminDefinitionSubSectionSchema, roles?: Record<string, Role>) => Partial<State>) => {
         if (!this.props.schema) {
             return;
@@ -1368,30 +1349,24 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
                         onClick={this.handleSubmit}
                         savingMessage={this.props.intl.formatMessage({id: 'admin.saving', defaultMessage: 'Saving Config...'})}
                     />
-                    <div
-                        className='error-message'
-                        data-testid='errorMessage'
-                        ref={this.errorMessageRef}
-                        onMouseOver={this.openTooltip}
-                        onMouseOut={this.closeTooltip}
-                    >
-                        <FormError
-                            iconClassName='fa-exclamation-triangle'
-                            textClassName='has-warning'
-                            error={this.state.clientWarning}
-                        />
-
-                        <FormError error={this.state.serverError}/>
-                    </div>
-                    <Overlay
-                        show={this.state.errorTooltip}
+                    <WithTooltip
+                        id='error-tooltip'
                         placement='top'
-                        target={this.errorMessageRef.current!}
+                        title={this.state?.serverError ?? ''}
                     >
-                        <Tooltip id='error-tooltip' >
-                            {this.state.serverError}
-                        </Tooltip>
-                    </Overlay>
+                        <div
+                            className='error-message'
+                            data-testid='errorMessage'
+                        >
+                            <FormError
+                                iconClassName='fa-exclamation-triangle'
+                                textClassName='has-warning'
+                                error={this.state.clientWarning}
+                            />
+
+                            <FormError error={this.state.serverError}/>
+                        </div>
+                    </WithTooltip>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/sass/components/_permissions.scss b/webapp/channels/src/sass/components/_permissions.scss
index 71f1bffebd..84fd87e97a 100644
--- a/webapp/channels/src/sass/components/_permissions.scss
+++ b/webapp/channels/src/sass/components/_permissions.scss
@@ -172,6 +172,7 @@
         display: flex;
         overflow: hidden;
         width: 100%;
+        width: fit-content;
         height: 100%;
         align-items: center;
         opacity: 0.75;
diff --git a/webapp/channels/src/utils/position_utils.test.tsx b/webapp/channels/src/utils/position_utils.test.tsx
index b60c2b316a..70d4c44741 100644
--- a/webapp/channels/src/utils/position_utils.test.tsx
+++ b/webapp/channels/src/utils/position_utils.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {popOverOverlayPosition, approxGroupPopOverHeight} from 'utils/position_utils';
+import {popOverOverlayPosition} from 'utils/position_utils';
 
 test('Should return placement position for overlay based on bounds, space required and innerHeight', () => {
     const targetBounds = {
@@ -14,28 +14,3 @@ test('Should return placement position for overlay based on bounds, space requir
     expect(popOverOverlayPosition(targetBounds as DOMRect, 1000, 450)).toEqual('bottom');
     expect(popOverOverlayPosition(targetBounds as DOMRect, 1000, 600)).toEqual('left');
 });
-
-test('Should return the correct height for the group list overlay bounded by viewport height or max list height', () => {
-    // constants. should not need to change
-    const viewportScaleFactor = 0.4;
-    const headerHeight = 130;
-    const maxListHeight = 800;
-
-    // array of [listHeight, viewPortHeight, expected]
-    // tests for cases when
-    // group list fits
-    // group list is too tall for viewport
-    // group list reaches max list height
-    const testCases = [[100, 1000, 230], [500, 500, 330], [800, 2000, maxListHeight]];
-
-    for (const [listHeight, viewPortHeight, expected] of testCases) {
-        expect(
-            approxGroupPopOverHeight(
-                listHeight,
-                viewPortHeight,
-                viewportScaleFactor,
-                headerHeight,
-                maxListHeight,
-            )).toBe(expected);
-    }
-});
diff --git a/webapp/channels/src/utils/position_utils.tsx b/webapp/channels/src/utils/position_utils.tsx
index 0bc08a8697..da16b7f592 100644
--- a/webapp/channels/src/utils/position_utils.tsx
+++ b/webapp/channels/src/utils/position_utils.tsx
@@ -22,17 +22,3 @@ export function popOverOverlayPosition(
     }
     return placement;
 }
-
-export function approxGroupPopOverHeight(
-    groupListHeight: number,
-    viewPortHeight: number,
-    viewportScaleFactor: number,
-    headerHeight: number,
-    maxListHeight: number,
-): number {
-    return Math.min(
-        (viewPortHeight * viewportScaleFactor) + headerHeight,
-        groupListHeight + headerHeight,
-        maxListHeight,
-    );
-}