[MM-62074] Move tooltips with withTooltip to new Tooltip component (#29528)

* replace inside of comp/withtooltip

* remove overlay trigger eslint rl

* update location of prev migrated new tooltips

* copy button

* shared_channel_indicator, shared_user_indicator.tsx, size_aware_image

* actions_menu, old_admin_settings, schema_admin_settings, admin_settings

* billing_summary, brand_image_setting, edit_section_edit_table_row, elapsed_duration_cell

* permissions_scheme_summary,secure_connections/controls,system_users_column_toggler_menu,system_users_export,group/group_users/users_to_remove_groups

* team_profile,user_grid_role_dropdown,priority_labels,toggle_formatting_bar,use_emoji_picker,formatting_icon

* show_formatting,alert_banner others

* more

* snap fix

* add disabled prop to menu

* test fix for avatar

feat: Add id to WithTooltip in Avatars component to fix test failures

* combine refs in withtooltip

* channel header title favorite test fix

* priority label comp changes

* types check for children

* Update avatar.tsx

* e2e fixes

* fix E2E tests

* Remove memo from WithTooltip

I found that the web app leaks a fair bit less memory when this is removed. See https://community.mattermost.com/core/pl/gwyyoww9gtbg8fddoic9meq84y for more information

* e2e lint fixes

* e2e fixes

* Fix test style issue

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts

@@ -99,21 +99,21 @@ describe('Channel Info RHS', () => {
                 cy.get('#channel-info-btn').click();
 
                 // * Verify tooltips appear with correct text
-                cy.uiGetRHS().findByText('Favorite').trigger('mouseover');
-                cy.get('#favorite-tooltip').should('be.visible').and('have.text', 'Add this channel to favorites');
-                cy.uiGetRHS().findByText('Favorite').trigger('mouseout');
+                cy.uiGetRHS().findByText('Favorite').trigger('mouseenter');
+                cy.findByText('Add this channel to favorites').should('be.visible');
+                cy.uiGetRHS().findByText('Favorite').trigger('mouseleave');
 
-                cy.uiGetRHS().findByText('Mute').trigger('mouseover');
-                cy.get('#mute-tooltip').should('be.visible').and('have.text', 'Mute notifications for this channel');
-                cy.uiGetRHS().findByText('Mute').trigger('mouseout');
+                cy.uiGetRHS().findByText('Mute').trigger('mouseenter');
+                cy.findByText('Mute notifications for this channel').should('be.visible');
+                cy.uiGetRHS().findByText('Mute').trigger('mouseleave');
 
-                cy.uiGetRHS().findByText('Add People').trigger('mouseover');
-                cy.get('#add-people-tooltip').should('be.visible').and('have.text', 'Add team members to this channel');
-                cy.uiGetRHS().findByText('Add People').trigger('mouseout');
+                cy.uiGetRHS().findByText('Add People').trigger('mouseenter');
+                cy.findByText('Add team members to this channel').should('be.visible');
+                cy.uiGetRHS().findByText('Add People').trigger('mouseleave');
 
-                cy.uiGetRHS().findByText('Copy Link').trigger('mouseover');
-                cy.get('#copy-link-tooltip').should('be.visible').and('have.text', 'Copy link to this channel');
-                cy.uiGetRHS().findByText('Copy Link').trigger('mouseout');
+                cy.uiGetRHS().findByText('Copy Link').trigger('mouseenter');
+                cy.findByText('Copy link to this channel').should('be.visible');
+                cy.uiGetRHS().findByText('Copy Link').trigger('mouseleave');
             });
 
             it('should be able to toggle favorite on a channel', () => {

e2e-tests/cypress/tests/integration/channels/channel/channel_members_rhs_spec.ts

@@ -235,6 +235,8 @@ describe('Channel members RHS', () => {
             // # Click on the Manage button
             cy.uiGetRHS().findByText('Manage').should('be.visible').click();
 
+            cy.wait(500);
+
             // * Can see user with their roles, and change it
             cy.uiGetRHS().findByTestId(`memberline-${user.id}`).should('be.visible').within(() => {
                 cy.contains(`${user.username}`).should('be.visible');

e2e-tests/cypress/tests/integration/channels/channel/channel_name_tooltips_spec.ts

@@ -17,26 +17,6 @@ import * as TIMEOUTS from '../../../fixtures/timeouts';
 
 const timestamp = Date.now();
 
-function verifyChannel(channel: Channel, verifyExistence = true) {
-    // # Wait for Channel to be created
-    cy.wait(TIMEOUTS.HALF_SEC);
-
-    // # Hover on the channel name
-    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseover');
-
-    // * Verify that the tooltip is displayed
-    if (verifyExistence) {
-        cy.get('div.tooltip-inner').
-            should('be.visible').
-            and('contain', channel.display_name);
-    } else {
-        cy.get('div.tooltip-inner').should('not.exist');
-    }
-
-    // # Move cursor away from channel
-    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseout');
-}
-
 describe('channel name tooltips', () => {
     let loggedUser: UserProfile;
     let longUser: UserProfile;
@@ -122,12 +102,30 @@ describe('channel name tooltips', () => {
         cy.uiGetButton('Go').click();
 
         // # Hover on the channel name
-        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseover');
+        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseenter');
 
         // * Verify that the tooltip is displayed
-        cy.get('div.tooltip-inner').should('be.visible');
+        cy.findByRole('tooltip').should('be.visible');
 
         // # Move cursor away from channel
-        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseout');
+        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseleave');
     });
 });
+
+function verifyChannel(channel: Channel, verifyExistence = true) {
+    // # Wait for Channel to be created
+    cy.wait(TIMEOUTS.HALF_SEC);
+
+    // # Hover on the channel name
+    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseenter');
+
+    // * Verify that the tooltip is displayed
+    if (verifyExistence) {
+        cy.findByRole('tooltip').should('be.visible').and('have.text', channel.display_name);
+    } else {
+        cy.findByRole('tooltip').should('not.exist');
+    }
+
+    // # Move cursor away from channel
+    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseleave');
+}

e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts

@@ -104,14 +104,16 @@ describe('MM-T4064 Status expiry visibility', () => {
         // # Post a message in the channel
         cy.postMessage('Hello World!');
 
-        // # Hover on the custom status emoji present in the post header
-        cy.get('.post.current--user .post__header span.emoticon').trigger('mouseover');
+        // # Get the last post
+        cy.getLastPostId().then((postId) => {
+            // # Hover on the custom status emoji present in the post header
+            cy.get(`#post_${postId}`).find('.emoticon').should('exist').trigger('mouseenter');
 
-        // * Custom status tooltip should be visible
-        cy.get('#custom-status-tooltip').should('exist');
+            // * Custom status tooltip should be visible and contain the correct custom status expiry time
+            cy.findByRole('tooltip').should('exist').and('contain.text', expiresAt.format(expiryTimeFormat));
 
-        // * Tooltip should contain the correct custom status expiry time
-        cy.get('#custom-status-tooltip .custom-status-expiry time').should('have.text', expiresAt.format(expiryTimeFormat));
+            cy.get(`#post_${postId}`).find('.emoticon').trigger('mouseleave');
+        });
     });
 
     it('MM-T4064_7 should show custom status expiry time in the user popover', () => {

e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_audio_spec.js

@@ -126,14 +126,16 @@ function testAudioFile(properties) {
         cy.get('@filePreviewModal').get('video').should('exist');
     }
 
+    cy.get('.file-preview-modal__file-name').should('have.text', fileName);
+
     // * Download button should exist
     cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-        expect(downloadLink.attr('download')).to.equal(fileName);
+        cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
+            const fileAttachmentURL = link.attr('href');
 
-        const fileAttachmentURL = downloadLink.attr('href');
-
-        // * Verify that download link has correct name
-        downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+            // * Verify that download link has correct name
+            downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+        });
     });
 
     // # Close modal

e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_generic_spec.js

@@ -114,12 +114,12 @@ function testGenericFile(properties) {
 
     // * Download button should exist
     cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-        expect(downloadLink.attr('download')).to.equal(fileName);
+        cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
+            const fileAttachmentURL = link.attr('href');
 
-        const fileAttachmentURL = downloadLink.attr('href');
-
-        // * Verify that download link has correct name
-        downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+            // * Verify that download link has correct name
+            downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+        });
     });
 
     // # Close modal

e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_image_spec.js

@@ -145,12 +145,12 @@ function testImage(properties) {
 
     // * Download button should exist
     cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-        expect(downloadLink.attr('download')).to.equal(fileName);
+        cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
+            const fileAttachmentURL = link.attr('href');
 
-        const fileAttachmentURL = downloadLink.attr('href');
-
-        // * Verify that download link has correct name
-        downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+            // * Verify that download link has correct name
+            downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+        });
     });
 
     // # Close modal

e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_video_spec.js

@@ -126,12 +126,12 @@ export function testVideoFile(properties) {
 
     // * Download button should exist
     cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-        expect(downloadLink.attr('download')).to.equal(fileName);
+        cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
+            const fileAttachmentURL = link.attr('href');
 
-        const fileAttachmentURL = downloadLink.attr('href');
-
-        // * Verify that download link has correct name
-        downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+            // * Verify that download link has correct name
+            downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
+        });
     });
 
     // # Close modal

e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_not_cloud_spec.js

@@ -71,8 +71,8 @@ describe('Upload Files', () => {
             cy.uiGetFilePreviewModal();
 
             // # Hover over the downlink button and verify that tooltip is shown
-            cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseover');
-            cy.uiGetToolTip('Get a public link');
+            cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseenter');
+            cy.findByText('Get a public link').should('exist');
 
             // # Copy download link
             cy.uiGetDownloadLinkFilePreviewModal().click();
@@ -178,8 +178,8 @@ describe('Upload Files', () => {
             cy.uiGetFilePreviewModal();
 
             // # Hover over the downlink button and verify that tooltip is shown
-            cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseover');
-            cy.uiGetToolTip('Get a public link');
+            cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseenter');
+            cy.findByText('Get a public link').should('exist');
 
             // # Click to copy download link
             cy.uiGetDownloadLinkFilePreviewModal().click({force: true});

e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_spec.js

@@ -140,12 +140,12 @@ describe('Upload Files', () => {
 
             // * Download button should exist
             cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-                expect(downloadLink.attr('download')).to.equal(file.filename);
+                cy.wrap(downloadLink).parent().should('have.attr', 'download', file.filename).then((link) => {
+                    const fileAttachmentURL = link.attr('href');
 
-                const fileAttachmentURL = downloadLink.attr('href');
-
-                // * Verify that download link has correct name
-                downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, file.filename, 'attachment');
+                    // * Verify that download link has correct name
+                    downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, file.filename, 'attachment');
+                });
             });
 
             // # Close the modal
@@ -174,12 +174,12 @@ describe('Upload Files', () => {
 
             // * Download button should exist
             cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-                expect(downloadLink.attr('download')).to.equal(filename);
+                cy.wrap(downloadLink).parent().should('have.attr', 'download', filename).then((link) => {
+                    const fileAttachmentURL = link.attr('href');
 
-                const fileAttachmentURL = downloadLink.attr('href');
-
-                // * Verify that download link has correct name
-                downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
+                    // * Verify that download link has correct name
+                    downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
+                });
             });
 
             // # Close the modal
@@ -405,12 +405,12 @@ describe('Upload Files', () => {
 
         // * Download button should exist
         cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
-            expect(downloadLink.attr('download')).to.equal(filename);
+            cy.wrap(downloadLink).parent().should('have.attr', 'download', filename).then((link) => {
+                const fileAttachmentURL = link.attr('href');
 
-            const fileAttachmentURL = downloadLink.attr('href');
-
-            // * Verify that download link has correct name
-            downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
+                // * Verify that download link has correct name
+                downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
+            });
         });
 
         // # Close modal

e2e-tests/cypress/tests/integration/playbooks/channels/app_bar_spec.js

@@ -60,10 +60,10 @@ describe('channels > App Bar', {testIsolation: true}, () => {
             cy.visit(`/${testTeam.name}/channels/town-square`);
 
             // # Hover over the channel header icon
-            cy.getPlaybooksAppBarIcon().trigger('mouseover');
+            cy.getPlaybooksAppBarIcon().trigger('mouseenter');
 
             // * Verify tooltip text
-            cy.findByRole('tooltip', {name: 'Playbooks'}).should('be.visible');
+            cy.findByRole('tooltip').should('be.visible').and('contain', 'Playbooks');
         });
     });
 });

e2e-tests/cypress/tests/support/ui/file_preview.js

@@ -51,17 +51,17 @@ Cypress.Commands.add('uiGetContentFilePreviewModal', () => {
 });
 
 Cypress.Commands.add('uiGetDownloadLinkFilePreviewModal', () => {
-    return cy.uiGetFilePreviewModal().find('.icon-link-variant').parent();
+    return cy.uiGetFilePreviewModal().find('.icon-link-variant');
 });
 
 Cypress.Commands.add('uiGetDownloadFilePreviewModal', () => {
-    return cy.uiGetFilePreviewModal().find('.icon-download-outline').parent();
+    return cy.uiGetFilePreviewModal().find('.icon-download-outline');
 });
 
 Cypress.Commands.add('uiGetArrowLeftFilePreviewModal', () => {
-    return cy.uiGetFilePreviewModal().find('.icon-chevron-left').parent();
+    return cy.uiGetFilePreviewModal().find('.icon-chevron-left');
 });
 
 Cypress.Commands.add('uiGetArrowRightFilePreviewModal', () => {
-    return cy.uiGetFilePreviewModal().find('.icon-chevron-right').parent();
+    return cy.uiGetFilePreviewModal().find('.icon-chevron-right');
 });

e2e-tests/cypress/tests/support/ui/tooltip.js

@@ -2,5 +2,5 @@
 // See LICENSE.txt for license information.
 
 Cypress.Commands.add('uiGetToolTip', (text) => {
-    cy.findByRole('tooltip').should('contain', text);
+    cy.findByRole('tooltip').should('exist').and('contain', text);
 });

webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap

@@ -763,8 +763,6 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
           </div>
           <WithTooltip
             disabled={false}
-            id="removeIcon"
-            placement="right"
             title={
               <Memo(MemoizedFormattedMessage)
                 defaultMessage="Remove This Icon"
@@ -922,8 +920,6 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
           </div>
           <WithTooltip
             disabled={false}
-            id="removeIcon"
-            placement="right"
             title={
               <Memo(MemoizedFormattedMessage)
                 defaultMessage="Remove Profile Picture"

webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap

@@ -47,8 +47,6 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
         className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
       >
         <WithTooltip
-          id="single_image_view.copy_link_tooltip.text"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Copy link"
@@ -68,8 +66,6 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
           </button>
         </WithTooltip>
         <WithTooltip
-          id="single_image_view.download_tooltip.text"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Download"
@@ -145,8 +141,6 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
         className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
       >
         <WithTooltip
-          id="single_image_view.copy_link_tooltip.text"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Copy link"
@@ -166,8 +160,6 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
           </button>
         </WithTooltip>
         <WithTooltip
-          id="single_image_view.download_tooltip.text"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Download"
@@ -256,8 +248,6 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
         className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
       >
         <WithTooltip
-          id="single_image_view.copy_link_tooltip.text"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Copy link"
@@ -277,8 +267,6 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
           </button>
         </WithTooltip>
         <WithTooltip
-          id="single_image_view.download_tooltip.text"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Download"

webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap

@@ -8,8 +8,6 @@ exports[`components/actions_menu/ActionsMenu has actions - marketplace disabled
   open={true}
 >
   <WithTooltip
-    id="center_post_id_1_tooltip"
-    placement="top"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Message actions"
@@ -59,8 +57,6 @@ exports[`components/actions_menu/ActionsMenu has actions - marketplace enabled a
   open={true}
 >
   <WithTooltip
-    id="center_post_id_1_tooltip"
-    placement="top"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Message actions"
@@ -129,8 +125,6 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
   open={true}
 >
   <WithTooltip
-    id="center_post_id_1_tooltip"
-    placement="top"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Message actions"

webapp/channels/src/components/actions_menu/actions_menu.tsx

@@ -381,14 +381,12 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
                 onToggle={this.handleDropdownOpened}
             >
                 <WithTooltip
-                    id={`${this.props.location}_${this.props.post.id}_tooltip`}
                     title={
                         <FormattedMessage
                             id='post_info.tooltip.actions'
                             defaultMessage='Message actions'
                         />
                     }
-                    placement='top'
                 >
                     <button
                         key='more-actions-button'

webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap

@@ -179,8 +179,6 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -373,8 +371,6 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap

@@ -190,8 +190,6 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -397,8 +395,6 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -604,8 +600,6 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -811,8 +805,6 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap

@@ -409,8 +409,6 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap

@@ -478,8 +478,6 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -972,8 +970,6 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap

@@ -147,8 +147,6 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -425,8 +423,6 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -589,8 +585,6 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -867,8 +861,6 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap

@@ -172,8 +172,6 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -305,8 +303,6 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap

@@ -675,8 +675,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
       savingMessage="Saving Config..."
     />
     <WithTooltip
-      id="error-tooltip"
-      placement="top"
       title=""
     >
       <div

webapp/channels/src/components/admin_console/admin_settings/admin_settings.tsx

@@ -60,8 +60,6 @@ const AdminSettings = ({
                         }
                     />
                     <WithTooltip
-                        id='error-tooltip'
-                        placement='top'
                         title={serverError ?? ''}
                     >
                         <div

webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx

@@ -273,10 +273,8 @@ export const InvoiceInfo = ({invoice, product, fullCharges, partialCharges, hasM
                             defaultMessage='Partial charges'
                         />
                         <WithTooltip
-                            id='BillingSubscriptions__seatOverageTooltip'
                             title={messages.partialChargesTooltipTitle}
                             hint={messages.partialChargesTooltipText}
-                            placement='bottom'
                         >
                             <i className='icon-information-outline'/>
                         </WithTooltip>

webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx

@@ -198,13 +198,13 @@ export default class BrandImageSetting extends React.PureComponent<Props, State>
             if (!this.props.disabled) {
                 overlay = (
                     <WithTooltip
-                        id='removeIcon'
-                        title={
+                        title={(
                             <FormattedMessage
                                 id='admin.team.removeBrandImage'
                                 defaultMessage='Remove brand image'
-                            />}
-                        placement='right'
+                            />
+                        )}
+                        isVertical={false}
                     >
                         <button
                             type='button'

webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap

@@ -180,8 +180,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       savingMessage="Saving Config..."
     />
     <WithTooltip
-      id="error-tooltip"
-      placement="top"
       title=""
     >
       <div
@@ -232,8 +230,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       savingMessage="Saving Config..."
     />
     <WithTooltip
-      id="error-tooltip"
-      placement="top"
       title=""
     >
       <div
@@ -434,8 +430,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       savingMessage="Saving Config..."
     />
     <WithTooltip
-      id="error-tooltip"
-      placement="top"
       title=""
     >
       <div

webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap

@@ -31,8 +31,6 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -79,8 +77,6 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -127,8 +123,6 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -175,8 +169,6 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx

@@ -44,8 +44,6 @@ const EditTableRow = ({
                 {hoveredRow === index && (
                     <>
                         <WithTooltip
-                            id='edit-tooltip'
-                            placement='top'
                             title={formatMessage({id: 'admin.ip_filtering.edit', defaultMessage: 'Edit'})}
                         >
                             <div
@@ -58,8 +56,6 @@ const EditTableRow = ({
                             </div>
                         </WithTooltip>
                         <WithTooltip
-                            id='delete-tooltip'
-                            placement='top'
                             title={formatMessage({id: 'admin.ip_filtering.delete', defaultMessage: 'Delete'})}
                         >
                             <div

webapp/channels/src/components/admin_console/list_table/elapsed_duration_cell.tsx

@@ -65,8 +65,6 @@ export function ElapsedDurationCell(props: Props) {
 
     return (
         <WithTooltip
-            id='system-users-cell-elapsed-duration-tooltip'
-            placement='bottom'
             title={exactPassedInDate}
         >
             <span>{elapsedDaysText}</span>

webapp/channels/src/components/admin_console/old_admin_settings.tsx

@@ -239,8 +239,6 @@ export default abstract class OLDAdminSettings <Props extends BaseProps, State e
                             }
                         />
                         <WithTooltip
-                            id='error-tooltip'
-                            placement='top'
                             title={this.state?.serverError ?? ''}
                         >
                             <div

webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap

@@ -25,8 +25,6 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
   >
     <WithTooltip
       disabled={false}
-      id="defaultID"
-      placement="top"
       title={
         <span
           className="inherit-link-wrapper"
@@ -44,108 +42,42 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
         </span>
       }
     >
-      <OverlayTrigger
-        defaultOverlayShown={false}
-        delay={400}
-        disabled={false}
-        overlay={<Unknown />}
-        placement="top"
-        trigger={
-          Array [
-            "hover",
-            "focus",
-          ]
-        }
+      <span
+        className="permission-description"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseMove={[Function]}
+        onPointerDown={[Function]}
+        onPointerEnter={[Function]}
       >
-        <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
+          className="inherit-link-wrapper"
         >
-          <span
-            className="permission-description"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <FormattedMessage
+            defaultMessage="Inherited from <link>{name}</link>."
+            id="admin.permissions.inherited_from"
+            values={
+              Object {
+                "link": [Function],
+                "name": "All Members",
+              }
+            }
           >
-            <span
-              className="inherit-link-wrapper"
-            >
-              <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"
               >
-                <span>
-                  Inherited from 
-                  <a
-                    key=".$.1"
-                  >
-                    All Members
-                  </a>
-                  .
-                </span>
-              </FormattedMessage>
+                All Members
+              </a>
+              .
             </span>
-          </span>
-        </OverlayTrigger>
-      </OverlayTrigger>
+          </FormattedMessage>
+        </span>
+      </span>
     </WithTooltip>
   </PermissionDescription>
 </Provider>
@@ -199,8 +131,6 @@ 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`] = `
 <WithTooltip
   disabled={false}
-  id="defaultID"
-  placement="top"
   title={
     <span>
       This is a clickable description
@@ -221,8 +151,6 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
 exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with default Props 1`] = `
 <WithTooltip
   disabled={false}
-  id="defaultID"
-  placement="top"
   title="This is the description"
 >
   <span

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx

@@ -68,8 +68,6 @@ const PermissionDescription = ({
 
     return (
         <WithTooltip
-            id={id}
-            placement='top'
             title={content}
             disabled={!showTooltip}
         >

webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap

@@ -273,8 +273,6 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
       Team 8
     </span>
     <WithTooltip
-      id="id-extra-teams-overlay"
-      placement="bottom"
       title="Team 9, Team 10"
     >
       <span

webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx

@@ -145,9 +145,7 @@ export default class PermissionsSchemeSummary extends React.PureComponent<Props
         if (teams.length > MAX_TEAMS_PER_SCHEME_SUMMARY) {
             extraTeams = (
                 <WithTooltip
-                    id={scheme.id + '-extra-teams-overlay'}
                     title={this.props?.teams?.slice(MAX_TEAMS_PER_SCHEME_SUMMARY).map((team) => team.display_name).join(', ') ?? ''}
-                    placement='bottom'
                 >
                     <span
                         className='team'

webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap

@@ -244,8 +244,6 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -505,8 +503,6 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -583,8 +579,6 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -844,8 +838,6 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -1107,8 +1099,6 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -1372,8 +1362,6 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -1633,8 +1621,6 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -1878,8 +1864,6 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -2139,8 +2123,6 @@ exports[`components/PluginManagement should match snapshot, text entered into th
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -2407,8 +2389,6 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -2731,8 +2711,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -3023,8 +3001,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -3315,8 +3291,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -3607,8 +3581,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
@@ -3931,8 +3903,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div

webapp/channels/src/components/admin_console/schema_admin_settings.tsx

@@ -1350,8 +1350,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
                         savingMessage={this.props.intl.formatMessage({id: 'admin.saving', defaultMessage: 'Saving Config...'})}
                     />
                     <WithTooltip
-                        id='error-tooltip'
-                        placement='top'
                         title={this.state?.serverError ?? ''}
                     >
                         <div

webapp/channels/src/components/admin_console/secure_connections/controls.tsx

@@ -230,8 +230,6 @@ export const ConnectionStatusLabel = ({rc}: {rc: RemoteCluster}) => {
 
     return (
         <WithTooltip
-            id='connection-status-tooltip'
-            placement='top'
             title={(
                 <>
                     <FormattedMessage

webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx

@@ -459,7 +459,6 @@ export class SystemUserDetail extends PureComponent<Props, State> {
                                     {
                                         this.props.showLockedManageUserSettings &&
                                         <WithTooltip
-                                            id='adminUserSettingUpdateDisabled'
                                             title={defineMessage({
                                                 id: 'generic.enterprise_feature',
                                                 defaultMessage: 'Enterprise feature',
@@ -468,7 +467,6 @@ export class SystemUserDetail extends PureComponent<Props, State> {
                                                 id: 'admin.user_item.manageSettings.disabled_tooltip',
                                                 defaultMessage: 'Please upgrade to Enterprise to manage user settings',
                                             })}
-                                            placement='top'
                                         >
                                             <button
                                                 className='manageUserSettingsBtn btn disabled'

webapp/channels/src/components/admin_console/system_users/system_users.tsx

@@ -279,13 +279,11 @@ function SystemUsers(props: Props) {
                                 {getDisplayName(info.row.original) || ''}
                                 {isRemoteUser && (
                                     <SharedUserIndicator
-                                        id={`sharedUserIndicator-${info.row.original.id}`}
                                         title={formatMessage({id: 'admin.system_users.list.userIsRemote', defaultMessage: 'Remote user'})}
                                         ariaLabel={formatMessage({id: 'admin.system_users.list.userIsRemoteAriaLabel', defaultMessage: 'This is a remote user'})}
                                         role='img'
                                         className='icon-12'
                                         withTooltip={true}
-                                        placement='top'
                                     />
                                 )}
                             </div>

webapp/channels/src/components/admin_console/system_users/system_users_column_toggler_menu/index.tsx

@@ -155,10 +155,9 @@ export function SystemUsersColumnTogglerMenu(props: Props) {
                         return (
                             <WithTooltip
                                 key={column.id}
-                                id={column.id}
                                 title={formatMessage({id: 'admin.system_users.column_toggler.mysql_unavailable.title', defaultMessage: 'Not available for servers using MySQL'})}
                                 hint={formatMessage({id: 'admin.system_users.column_toggler.mysql_unavailable.desc', defaultMessage: 'Please use the export functionality to view these values'})}
-                                placement='left'
+                                isVertical={false}
                             >
                                 <Menu.Item
                                     className='systemUsersColumnToggler__lockedItem'

webapp/channels/src/components/admin_console/system_users/system_users_export/index.tsx

@@ -113,10 +113,8 @@ export function SystemUsersExport(props: Props) {
         return (
             <>
                 <WithTooltip
-                    id='sharedTooltip'
                     title={formatMessage({id: 'admin.system_users.exportButton.notLicensed.title', defaultMessage: 'Professional feature'})}
                     hint={formatMessage({id: 'admin.system_users.exportButton.notLicensed.hint', defaultMessage: 'This feature is available on the professional plan'})}
-                    placement='top'
                 >
                     {button}
                 </WithTooltip>

webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove_groups.test.tsx.snap

@@ -29,8 +29,6 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemoveGroup
   className="UsersToRemoveGroups"
 >
   <WithTooltip
-    id="groupsTooltip"
-    placement="bottom"
     title="group1, group2, group3"
   >
     <a

webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/users_to_remove_groups.tsx

@@ -39,8 +39,6 @@ export default function UsersToRemoveGroups(props: UsersToRemoveGroupsProps): JS
 
         column = (
             <WithTooltip
-                id='groupsTooltip'
-                placement='bottom'
                 title={tooltip}
             >
                 <a href='#'>{message}</a>

webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx

@@ -65,10 +65,8 @@ export function TeamProfile({team, isArchived, onToggleArchive, isDisabled, save
         if (restoreDisabled) {
             return (
                 <WithTooltip
-                    id='sharedTooltip'
-                    title={defineMessage({id: 'workspace_limits.teams_limit_reached.upgrade_to_unarchive', defaultMessage: 'Upgrade to Unarchive'})}
-                    hint={defineMessage({id: 'workspace_limits.teams_limit_reached.tool_tip', defaultMessage: 'You\'ve reached the team limit for your current plan. Consider upgrading to unarchive this team or archive your other teams'})}
-                    placement='bottom'
+                    title={intl.formatMessage({id: 'workspace_limits.teams_limit_reached.upgrade_to_unarchive', defaultMessage: 'Upgrade to Unarchive'})}
+                    hint={intl.formatMessage({id: 'workspace_limits.teams_limit_reached.tool_tip', defaultMessage: 'You\'ve reached the team limit for your current plan. Consider upgrading to unarchive this team or archive your other teams'})}
                 >
                     <div
                         className={'disabled-overlay-wrapper'}

webapp/channels/src/components/admin_console/user_grid/user_grid_role_dropdown.tsx

@@ -134,8 +134,6 @@ export default class UserGridRoleDropdown extends React.PureComponent<Props> {
             return (
                 <div className='more-modal__shared-actions'>
                     <WithTooltip
-                        id='userGridDropdown.sharedUserIndicator.tooltip'
-                        placement='bottom'
                         title={
                             <FormattedMessage
                                 id='shared_user_indicator.tooltip'

webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx

@@ -147,8 +147,6 @@ const FormattingIcon = (props: FormattingIconProps): JSX.Element => {
 
     return (
         <WithTooltip
-            id='formatting-icon-tooltip'
-            placement='top'
             title={
                 <KeyboardShortcutSequence
                     shortcut={shortcut}

webapp/channels/src/components/advanced_text_editor/priority_labels/index.tsx

@@ -1,102 +1,41 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React, {memo} from 'react';
-import type {CSSProperties} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
-import styled from 'styled-components';
 
-import {CheckCircleOutlineIcon, BellRingOutlineIcon} from '@mattermost/compass-icons/components';
 import type {PostPriorityMetadata} from '@mattermost/types/posts';
 
 import {HasNoMentions, HasSpecialMentions} from 'components/post_priority/error_messages';
 import PriorityLabel from 'components/post_priority/post_priority_label';
 import WithTooltip from 'components/with_tooltip';
 
+import './priority_labels.scss';
+
 type Props = {
     canRemove: boolean;
     hasError: boolean;
     specialMentions?: {[key: string]: boolean};
     onRemove?: () => void;
-    padding?: CSSProperties['padding'];
     persistentNotifications?: PostPriorityMetadata['persistent_notifications'];
     priority?: PostPriorityMetadata['priority'];
     requestedAck?: PostPriorityMetadata['requested_ack'];
 };
 
-type StyledProps = {
-    hasError: boolean;
-};
-
-const Priority = styled.div`
-    align-items: center;
-    display: flex;
-    gap: 6px;
-    padding: ${(props: {padding: CSSProperties['padding']}) => props.padding || '14px 16px 0'}
-`;
-
-const Acknowledgements = styled.div`
-    align-items: center;
-    color: ${(props: StyledProps) => (props.hasError ? 'var(--dnd-indicator)' : 'var(--online-indicator)')};
-    display: flex;
-
-    > span {
-        margin-left: 4px;
-        font-size: 11px;
-        font-weight: 600;
-    }
-`;
-
-const Notifications = styled.div`
-    align-items: center;
-    color: var(--dnd-indicator);
-    display: flex;
-
-    > span {
-        margin-left: 4px;
-        font-size: 11px;
-        font-weight: 600;
-    }
-`;
-
-const Close = styled.button`
-    align-items: center;
-    color: rgb(var(--center-channel-color));
-    display: flex;
-    font-size: 17px;
-    justify-content: center;
-    margin-top: -1px;
-    opacity: 0.73;
-    visibility: hidden;
-
-    &:hover {
-        opacity: 0.73;
-    }
-
-    ${Priority}:hover & {
-        visibility: visible;
-    }
-`;
-
-const Error = styled.div`
-    color: var(--dnd-indicator);
-    font-size: 11px;
-    font-weight: 600;
-`;
-
 function PriorityLabels({
     canRemove,
     hasError,
     specialMentions,
     onRemove,
-    padding,
     persistentNotifications,
     priority,
     requestedAck,
 }: Props) {
     const intl = useIntl();
+
     return (
-        <Priority padding={padding}>
+        <div className='priorityLabelsContainer'>
             {priority && (
                 <PriorityLabel
                     size='xs'
@@ -105,29 +44,23 @@ function PriorityLabels({
             )}
             {persistentNotifications && (
                 <WithTooltip
-                    id='post-priority-picker-persistent-notifications-tooltip'
-                    placement='top'
                     title={intl.formatMessage({
                         id: 'post_priority.persistent_notifications.tooltip',
                         defaultMessage: 'Persistent notifications will be sent',
                     })}
                 >
-                    <Notifications>
-                        <BellRingOutlineIcon size={14}/>
-                    </Notifications>
+                    <span className='icon icon-bell-ring-outline'/>
                 </WithTooltip>
             )}
             {requestedAck && (
-                <Acknowledgements hasError={hasError}>
+                <div className={classNames('priorityLabelsAcknowledgements', {hasError})}>
                     <WithTooltip
-                        id='post-priority-picker-ack-tooltip'
-                        placement='top'
                         title={intl.formatMessage({
                             id: 'post_priority.request_acknowledgement.tooltip',
                             defaultMessage: 'Acknowledgement will be requested',
                         })}
                     >
-                        <CheckCircleOutlineIcon size={14}/>
+                        <span className='icon icon-check-circle-outline'/>
                     </WithTooltip>
                     {!(priority) && (
                         <FormattedMessage
@@ -135,25 +68,22 @@ function PriorityLabels({
                             defaultMessage={'Request acknowledgement'}
                         />
                     )}
-                </Acknowledgements>
+                </div>
             )}
             {hasError && (
-                <Error>
+                <div className='priorityLabelsError'>
                     {(specialMentions && Object.values(specialMentions).includes(true)) ? <HasSpecialMentions specialMentions={specialMentions}/> : <HasNoMentions/>}
-                </Error>
+                </div>
             )}
             {canRemove && (
                 <WithTooltip
-                    id='post-priority-picker-tooltip'
-                    placement='top'
                     title={intl.formatMessage({
                         id: 'post_priority.remove',
                         defaultMessage: 'Remove {priority}',
                     }, {priority})}
                 >
-                    <Close
-                        type='button'
-                        className='close'
+                    <button
+                        className='priorityLabelsClose close'
                         onClick={onRemove}
                     >
                         <span aria-hidden='true'>{'×'}</span>
@@ -164,10 +94,10 @@ function PriorityLabels({
                                 values={{priority}}
                             />
                         </span>
-                    </Close>
+                    </button>
                 </WithTooltip>
             )}
-        </Priority>
+        </div>
     );
 }
 

webapp/channels/src/components/advanced_text_editor/priority_labels/priority_labels.scss

@@ -0,0 +1,45 @@
+.priorityLabelsContainer {
+    display: flex;
+    align-items: center;
+    padding: 14px 16px 0;
+    gap: 6px;
+
+    &:hover {
+        .priorityLabelsClose {
+            visibility: visible;
+        }
+    }
+
+    .priorityLabelsClose {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: -1px;
+        color: rgb(var(--center-channel-color));
+        font-size: 17px;
+        opacity: 0.73;
+        visibility: hidden;
+    }
+
+    span.icon {
+        font-size: 14px;
+
+        &.icon-bell-ring-outline {
+            color: var(--dnd-indicator);
+        }
+
+        &.icon-check-circle-outline {
+            color: var(--online-indicator);
+
+            &.hasError {
+                color: var(--dnd-indicator);
+            }
+        }
+    }
+
+    .priorityLabelsError {
+        color: var(--dnd-indicator);
+        font-size: 11px;
+        font-weight: 600;
+    }
+}

webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx

@@ -15,8 +15,8 @@ import {isSendOnCtrlEnter} from 'selectors/preferences';
 
 import {SendPostOptions} from 'components/advanced_text_editor/send_button/send_post_options';
 import WithTooltip from 'components/with_tooltip';
-import type {ShortcutDefinition} from 'components/with_tooltip/shortcut';
-import {ShortcutKeys} from 'components/with_tooltip/shortcut';
+import type {ShortcutDefinition} from 'components/with_tooltip/tooltip_shortcut';
+import {ShortcutKeys} from 'components/with_tooltip/tooltip_shortcut';
 
 import './send_button.scss';
 
@@ -65,8 +65,6 @@ const SendButton = ({disabled, handleSubmit, channelId}: SendButtonProps) => {
     return (
         <div className={classNames('splitSendButton', {disabled, scheduledPost: isScheduledPostEnabled})}>
             <WithTooltip
-                placement='top'
-                id='send_post_now_tooltip'
                 title={formatMessage({id: 'create_post_button.option.send_now', defaultMessage: 'Send Now'})}
                 shortcut={sendNowKeyboardShortcutDescriptor}
                 disabled={disabled}

webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/index.tsx

@@ -63,13 +63,13 @@ export function SendPostOptions({disabled, onSelect, channelId}: Props) {
 
     return (
         <Menu.Container
-            hideTooltipWhenDisabled={true}
             menuButtonTooltip={{
                 id: 'send_post_option_schedule_post',
                 text: formatMessage({
                     id: 'create_post_button.option.schedule_message',
                     defaultMessage: 'Schedule message',
                 }),
+                disabled,
             }}
             menuButton={{
                 id: 'button_send_post_options',

webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx

@@ -25,7 +25,6 @@ const ShowFormatting = (props: ShowFormatProps): JSX.Element => {
 
     return (
         <WithTooltip
-            id='PreviewInputTextButtonTooltip'
             title={
                 <KeyboardShortcutSequence
                     shortcut={KEYBOARD_SHORTCUTS.msgMarkdownPreview}
@@ -33,7 +32,6 @@ const ShowFormatting = (props: ShowFormatProps): JSX.Element => {
                     isInsideTooltip={true}
                 />
             }
-            placement='left'
         >
             <IconContainer
                 type='button'

webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx

@@ -41,9 +41,7 @@ const ToggleFormattingBar = (props: ToggleFormattingBarProps): JSX.Element => {
 
     return (
         <WithTooltip
-            id={active ? 'toggleFormattingBarButtonTooltip_active' : 'toggleFormattingBarButtonTooltip_inactive'}
             title={title}
-            placement={'top'}
         >
             <IconContainer
                 type='button'

webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx

@@ -129,8 +129,6 @@ const useEmojiPicker = (
                     topOffset={-7}
                 />
                 <WithTooltip
-                    id='upload-tooltip'
-                    placement='top'
                     title={
                         <KeyboardShortcutSequence
                             shortcut={KEYBOARD_SHORTCUTS.msgShowEmojiPicker}

webapp/channels/src/components/alert_banner/index.tsx

@@ -122,9 +122,8 @@ const AlertBanner = ({
             </div>
             {onDismiss && closeBtnTooltip && (
                 <WithTooltip
-                    id={`alertBannerTooltip_${id}`}
                     title={closeBtnTooltip}
-                    placement='left'
+                    isVertical={false}
                 >
                     {dismissButton}
                 </WithTooltip>

webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap

@@ -22,8 +22,6 @@ exports[`components/analytics/table_chart.tsx should match snapshot, loaded with
           >
             <td>
               <WithTooltip
-                id="tip-table-entry-test1"
-                placement="top"
                 title="test-tip1"
               >
                 <span>
@@ -42,8 +40,6 @@ exports[`components/analytics/table_chart.tsx should match snapshot, loaded with
           >
             <td>
               <WithTooltip
-                id="tip-table-entry-test2"
-                placement="top"
                 title="test-tip2"
               >
                 <span>

webapp/channels/src/components/analytics/activated_users_card/title.tsx

@@ -17,10 +17,8 @@ const Title = () => {
     const intl = useIntl();
     return (
         <WithTooltip
-            id='activated_user_title_tooltip'
             title={defineMessage({id: 'analytics.team.totalUsers.title.tooltip.title', defaultMessage: 'Activated users on this server'})}
             hint={defineMessage({id: 'analytics.team.totalUsers.title.tooltip.hint', defaultMessage: 'Also called Registered Users'})}
-            placement='top'
         >
             <span>
                 <ExternalLink

webapp/channels/src/components/analytics/table_chart.tsx

@@ -32,8 +32,6 @@ const TableChart = ({
                                 <tr key={'table-entry-' + item.name}>
                                     <td>
                                         <WithTooltip
-                                            id={'tip-table-entry-' + item.name}
-                                            placement='top'
                                             title={item.tip}
                                         >
                                             <span>{item.name}</span>

webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx

@@ -44,8 +44,6 @@ type State = {
     isStringContainingUrl: boolean;
 }
 
-const OVERLAY_ANNOUNCEMENT_HIDE_DELAY = 600;
-
 export default class AnnouncementBar extends React.PureComponent<Props, State> {
     messageRef: React.RefObject<HTMLDivElement>;
     constructor(props: Props) {
@@ -196,10 +194,8 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
         if (this.state.showTooltip) {
             barContent = (
                 <WithTooltip
-                    id='announcement-bar__tooltip'
                     title={this.props.tooltipMsg ? this.props.tooltipMsg : message}
-                    placement='bottom'
-                    delayHide={this.state.isStringContainingUrl ? OVERLAY_ANNOUNCEMENT_HIDE_DELAY : 0}
+                    tooltipContentContainerClassName='announcementBarTooltip'
                 >
                     {barContent}
 

webapp/channels/src/components/announcement_bar/default_announcement_bar/default_announcement_bar.scss

@@ -1,5 +1,5 @@
-#announcement-bar__tooltip {
-    width: 50%;
-    max-width: 100%;
+.announcementBarTooltip {
+    min-width: 50vw;
+    max-width: 100vw;
     pointer-events: auto;
 }

webapp/channels/src/components/app_bar/app_bar_binding.tsx

@@ -84,9 +84,8 @@ const AppBarBinding = (props: BindingComponentProps) => {
 
     return (
         <WithTooltip
-            id={'tooltip-' + id}
             title={label}
-            placement='left'
+            isVertical={false}
         >
             <div
                 id={id}

webapp/channels/src/components/app_bar/app_bar_marketplace.tsx

@@ -32,9 +32,8 @@ const AppBarMarketplace = () => {
 
     return (
         <WithTooltip
-            id='tooltip-app-bar-marketplace'
             title={label}
-            placement='left'
+            isVertical={false}
         >
             <button
                 key='app_bar_marketplace'

webapp/channels/src/components/app_bar/app_bar_plugin_component.tsx

@@ -96,9 +96,8 @@ const AppBarPluginComponent = (props: PluginComponentProps) => {
 
     return (
         <WithTooltip
-            id={'pluginTooltip-' + buttonId}
             title={tooltipText}
-            placement='left'
+            isVertical={false}
         >
             <div
                 id={buttonId}

webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap

@@ -1664,8 +1664,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
             className="channel-header__icons"
           >
             <WithTooltip
-              id="channelMutedTooltip"
-              placement="bottom"
               title={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Unmute"
@@ -2498,13 +2496,11 @@ exports[`components/ChannelHeader should render properly when custom status is s
                     }
                   }
                   showTooltip={true}
-                  tooltipDirection="bottom"
                   userID="user_id"
                 />
                 <CustomStatusText
                   className="custom-emoji__text"
                   text="In a meeting"
-                  tooltipDirection="bottom"
                 />
               </div>
             </span>

webapp/channels/src/components/channel_header/channel_header.tsx

@@ -239,7 +239,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                 <CustomStatusEmoji
                     userID={this.props.dmUser?.id}
                     showTooltip={true}
-                    tooltipDirection='bottom'
                     emojiStyle={{
                         verticalAlign: 'top',
                         margin: '0 4px 1px',
@@ -569,8 +568,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
         if (channelMuted) {
             muteTrigger = (
                 <WithTooltip
-                    id='channelMutedTooltip'
-                    placement='bottom'
                     title={
                         <FormattedMessage
                             id='channelHeader.unmute'

webapp/channels/src/components/channel_header/channel_header_title.tsx

@@ -138,8 +138,6 @@ const ChannelHeaderTitle = ({
                     >
                         {showTooltip ? (
                             <WithTooltip
-                                id='channelHeaderTooltip'
-                                placement='bottom'
                                 title={channelTitle as string}
                             >
                                 <strong

webapp/channels/src/components/channel_header/channel_header_title_favorite.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {screen, fireEvent, act} from '@testing-library/react';
+import {screen, fireEvent, act, waitFor} from '@testing-library/react';
 import React from 'react';
 
 import type {Channel} from '@mattermost/types/channels';
@@ -189,10 +189,7 @@ describe('ChannelHeaderTitleFavorite Component', () => {
         expect(icon).toHaveClass('icon-star');
     });
 
-    it('should dispatch A11yFocusEvent after toggling favorite', () => {
-        // Use fake timers to handle requestAnimationFrame
-        jest.useFakeTimers();
-
+    it('should dispatch A11yFocusEvent after toggling favorite', async () => {
         isCurrentChannelFavoriteMock.mockReturnValue(false);
         getCurrentChannelMock.mockReturnValue(activeChannel);
 
@@ -207,28 +204,36 @@ describe('ChannelHeaderTitleFavorite Component', () => {
         renderComponent();
 
         const button = screen.getByRole('button', {name: ADD_TO_FAVORITES_REGEX});
-        fireEvent.click(button);
+
+        // Ensure the ref is set by triggering a focus event
+        fireEvent.focus(button);
+
+        act(() => {
+            fireEvent.click(button);
+        });
 
         expect(dispatchMock).toHaveBeenCalledWith({
             type: 'FAVORITE_CHANNEL',
             data: activeChannel.id,
         });
 
-        // Execute the requestAnimationFrame callback
-        act(() => {
-            jest.runAllTimers();
+        await waitFor(() => {
+            expect(dispatchEventSpy).toHaveBeenCalled();
+        }, {
+            timeout: 1000, // Increase timeout
         });
 
-        expect(dispatchEventSpy).toHaveBeenCalled();
-
         // Verify the details of the dispatched event
-        const event = dispatchEventSpy.mock.calls.find((call) => call[0].type === A11yCustomEventTypes.FOCUS)?.[0] as CustomEvent<A11yFocusEventDetail>;
-        expect(event).toBeDefined();
+        const focusEvents = dispatchEventSpy.mock.calls.
+            filter((call) => call[0].type === A11yCustomEventTypes.FOCUS).
+            map((call) => call[0] as CustomEvent<A11yFocusEventDetail>);
+
+        expect(focusEvents.length).toBeGreaterThan(0);
+        const event = focusEvents[focusEvents.length - 1];
         expect(event.detail.target).toBe(button);
         expect(event.detail.keyboardOnly).toBe(false);
 
+        // Cleanup
         dispatchEventSpy.mockRestore();
-
-        jest.useRealTimers();
     });
 });

webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx

@@ -73,10 +73,7 @@ const ChannelHeaderTitleFavorite = () => {
 
     return (
         <WithTooltip
-            key={`isFavorite-${isFavorite}`}
-            id='favoriteTooltip'
             title={title}
-            placement='bottom'
         >
             <button
                 id='toggleFavorite'

webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import NewChannelWithBoardTourTip from 'components/app_bar/new_channel_with_board_tour_tip';
 import WithTooltip from 'components/with_tooltip';
-import type {ShortcutDefinition} from 'components/with_tooltip/shortcut';
+import type {ShortcutDefinition} from 'components/with_tooltip/tooltip_shortcut';
 
 import {suitePluginIds} from 'utils/constants';
 
@@ -47,8 +47,6 @@ const HeaderIconWrapper = (props: Props) => {
     return (
         <>
             <WithTooltip
-                id={buttonId + '-tooltip'}
-                placement='bottom'
                 title={isRhsOpen ? '' : tooltipText}
                 shortcut={tooltipShortcut}
             >

webapp/channels/src/components/channel_info_rhs/header.tsx

@@ -59,8 +59,6 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
             </span>
 
             <WithTooltip
-                id='closeSidebarTooltip'
-                placement='top'
                 title={
                     <FormattedMessage
                         id='rhs_header.closeSidebarTooltip'

webapp/channels/src/components/channel_info_rhs/top_buttons.tsx

@@ -124,8 +124,6 @@ export default function TopButtons({
     return (
         <ChannelInfoRhsTopButtons>
             <WithTooltip
-                placement='top'
-                id='favorite-tooltip'
                 title={
                     <FormattedMessage
                         id='channel_info_rhs.top_buttons.favorite.tooltip'
@@ -144,8 +142,6 @@ export default function TopButtons({
                 </Button>
             </WithTooltip>
             <WithTooltip
-                placement='top'
-                id='mute-tooltip'
                 title={
                     <FormattedMessage
                         id='channel_info_rhs.top_buttons.mute.tooltip'
@@ -165,8 +161,6 @@ export default function TopButtons({
             </WithTooltip>
             {canAddPeople && (
                 <WithTooltip
-                    id='add-people-tooltip'
-                    placement='top'
                     title={
                         <FormattedMessage
                             id='channel_info_rhs.top_buttons.add_people.tooltip'
@@ -192,8 +186,6 @@ export default function TopButtons({
             )}
             {canCopyLink && (
                 <WithTooltip
-                    id='copy-link-tooltip'
-                    placement='top'
                     title={
                         <FormattedMessage
                             id='channel_info_rhs.top_buttons.copy_link.tooltip'

webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx

@@ -104,9 +104,7 @@ const GroupOption = (props: Props) => {
                         {'@'}{group.name}
                     </span>
                     <WithTooltip
-                        id={'usernames-overflow'}
                         title={overflowNames}
-                        placement={'top'}
                     >
                         <span
                             className='add-group-members'

webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap

@@ -460,8 +460,6 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
           />,
           " and ",
           <WithTooltip
-            id="usernames-overflow"
-            placement="top"
             title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
           >
             <span
@@ -562,102 +560,33 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
             </Connect(Component)>
              and 
             <WithTooltip
-              id="usernames-overflow"
               key=".2"
-              placement="top"
               title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
             >
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delay={400}
-                disabled={false}
-                overlay={<Unknown />}
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
+              <span
+                className="add-others-link"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
               >
-                <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",
-                    ]
+                <FormattedMessage
+                  defaultMessage="{count} others"
+                  id="channel_invite.invite_team_members.messageOthers"
+                  values={
+                    Object {
+                      "count": 10,
+                    }
                   }
                 >
-                  <span
-                    className="add-others-link"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                  >
-                    <FormattedMessage
-                      defaultMessage="{count} others"
-                      id="channel_invite.invite_team_members.messageOthers"
-                      values={
-                        Object {
-                          "count": 10,
-                        }
-                      }
-                    >
-                      <span>
-                        10 others
-                      </span>
-                    </FormattedMessage>
+                  <span>
+                    10 others
                   </span>
-                </OverlayTrigger>
-              </OverlayTrigger>
+                </FormattedMessage>
+              </span>
             </WithTooltip>
              are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.
           </div>
@@ -777,8 +706,6 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
           />,
           " and ",
           <WithTooltip
-            id="usernames-overflow"
-            placement="top"
             title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
           >
             <span
@@ -882,102 +809,33 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
             </Connect(Component)>
              and 
             <WithTooltip
-              id="usernames-overflow"
               key=".3"
-              placement="top"
               title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
             >
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delay={400}
-                disabled={false}
-                overlay={<Unknown />}
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
+              <span
+                className="add-others-link"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
               >
-                <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",
-                    ]
+                <FormattedMessage
+                  defaultMessage="{count} others"
+                  id="channel_invite.invite_team_members.messageOthers"
+                  values={
+                    Object {
+                      "count": 10,
+                    }
                   }
                 >
-                  <span
-                    className="add-others-link"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                  >
-                    <FormattedMessage
-                      defaultMessage="{count} others"
-                      id="channel_invite.invite_team_members.messageOthers"
-                      values={
-                        Object {
-                          "count": 10,
-                        }
-                      }
-                    >
-                      <span>
-                        10 others
-                      </span>
-                    </FormattedMessage>
+                  <span>
+                    10 others
                   </span>
-                </OverlayTrigger>
-              </OverlayTrigger>
+                </FormattedMessage>
+              </span>
             </WithTooltip>
              to this channel once they are members of the 
             <strong

webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx

@@ -63,9 +63,7 @@ const TeamWarningBanner = (props: Props) => {
                         ),
                         others: (
                             <WithTooltip
-                                id='usernames-overflow'
                                 title={commaSeparatedUsernames.replace(`@${firstName}, `, '')}
-                                placement='top'
                             >
                                 <span
                                     className='add-others-link'
@@ -134,9 +132,7 @@ const TeamWarningBanner = (props: Props) => {
                     ),
                     others: (
                         <WithTooltip
-                            id='usernames-overflow'
                             title={commaSeparatedUsernames.replace(`@${firstName}, `, '')}
-                            placement='top'
                         >
                             <span
                                 className='add-others-link'

webapp/channels/src/components/channel_members_rhs/header.tsx

@@ -57,8 +57,6 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
             </span>
 
             <WithTooltip
-                id='closeSidebarTooltip'
-                placement='top'
                 title={
                     <FormattedMessage
                         id='rhs_header.closeSidebarTooltip'

webapp/channels/src/components/channel_members_rhs/member.tsx

@@ -198,12 +198,10 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
             </RoleChooser>
             {!editing && (
                 <WithTooltip
-                    id={`member-tooltip-${member.user.id}`}
                     title={formatMessage({
                         id: 'channel_members_rhs.member.send_message',
                         defaultMessage: 'Send message',
                     })}
-                    placement='left'
                 >
                     <SendMessage onClick={() => actions.openDirectMessage(member.user)}>
                         <i className='icon icon-send'/>

webapp/channels/src/components/common/comment_icon.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {useIntl} from 'react-intl';
 
 import ReplyIcon from 'components/widgets/icons/reply_icon';
-import WithTooltip from 'components/with_tooltip/with_tooltip_new';
+import WithTooltip from 'components/with_tooltip';
 
 import type {Locations} from 'utils/constants';
 

webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx

@@ -46,8 +46,6 @@ const MultiSelectCard = (props: Props) => {
     if (props.tooltip) {
         button = (
             <WithTooltip
-                id={props.id}
-                placement='top'
                 title={props.tooltip}
             >
                 {button}

webapp/channels/src/components/copy_button.tsx

@@ -5,14 +5,13 @@ import classNames from 'classnames';
 import React, {useRef, useState} from 'react';
 import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 
-import {copyToClipboard} from 'utils/utils';
+import WithTooltip from 'components/with_tooltip';
 
-import WithTooltip from './with_tooltip';
+import {copyToClipboard} from 'utils/utils';
 
 type Props = {
     content: string;
     isForText?: boolean;
-    placement?: string;
     className?: string;
 };
 
@@ -54,8 +53,6 @@ const CopyButton: React.FC<Props> = (props: Props) => {
 
     return (
         <WithTooltip
-            id='copyButton.text'
-            placement={props.placement ?? 'top'}
             title={tooltipText}
         >
             <span

webapp/channels/src/components/copy_text.tsx

@@ -30,11 +30,7 @@ const CopyText = ({
     }
 
     return (
-        <WithTooltip
-            id='copyTextTooltip'
-            placement='top'
-            title={label}
-        >
+        <WithTooltip title={label}>
             <button
                 data-testid='copyText'
                 className='btn btn-link fa fa-copy ml-2'

webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap

@@ -28,8 +28,6 @@ exports[`/components/create_team/components/display_name should match snapshot 1
             className="input-group input-group--limit"
           >
             <WithTooltip
-              id="urlTooltip"
-              placement="top"
               title="http://localhost:8065/"
             >
               <span

webapp/channels/src/components/create_team/components/team_url/team_url.tsx

@@ -233,9 +233,7 @@ export default class TeamUrl extends React.PureComponent<Props, State> {
                             <div className='col-sm-11'>
                                 <div className='input-group input-group--limit'>
                                     <WithTooltip
-                                        id='urlTooltip'
                                         title={title}
-                                        placement={'top'}
                                     >
                                         <span className='input-group-addon'>
                                             {title}

webapp/channels/src/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap

@@ -6,6 +6,5 @@ exports[`components/custom_status/custom_status_emoji should match snapshot with
 <CustomStatusEmoji
   emojiSize={34}
   showTooltip={true}
-  tooltipDirection="bottom"
 />
 `;

webapp/channels/src/components/custom_status/__snapshots__/custom_status_suggestion.test.tsx.snap

@@ -19,7 +19,6 @@ exports[`components/custom_status/custom_status_emoji should match snapshot 1`]
   <CustomStatusText
     className="statusSuggestion__text"
     text=""
-    tooltipDirection="top"
   />
 </button>
 `;
@@ -43,7 +42,6 @@ exports[`components/custom_status/custom_status_emoji should match snapshot with
   <CustomStatusText
     className="statusSuggestion__text with_duration"
     text=""
-    tooltipDirection="top"
   />
   <span
     className="statusSuggestion__duration"

webapp/channels/src/components/custom_status/__snapshots__/custom_status_text.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`components/custom_status/custom_status_text should match snapshot 1`] =
 <CustomStatusText
   className=""
   text=""
-  tooltipDirection="bottom"
 />
 `;
 
@@ -12,6 +11,5 @@ exports[`components/custom_status/custom_status_text should match snapshot with
 <CustomStatusText
   className=""
   text="In a meeting"
-  tooltipDirection="top"
 />
 `;

webapp/channels/src/components/custom_status/custom_status_emoji.test.tsx

@@ -32,7 +32,6 @@ describe('components/custom_status/custom_status_emoji', () => {
             <CustomStatusEmoji
                 emojiSize={34}
                 showTooltip={true}
-                tooltipDirection='bottom'
             />,
             {wrappingComponent: Provider, wrappingComponentProps: {store}},
         );

webapp/channels/src/components/custom_status/custom_status_emoji.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useMemo, useRef} from 'react';
 import {useSelector} from 'react-redux';
 
 import {CustomStatusDuration} from '@mattermost/types/users';
@@ -20,7 +20,6 @@ import ExpiryTime from './expiry_time';
 interface Props {
     emojiSize?: number;
     showTooltip?: boolean;
-    tooltipDirection?: 'top' | 'right' | 'bottom' | 'left';
     spanStyle?: React.CSSProperties;
     emojiStyle?: React.CSSProperties;
     userID?: string;
@@ -46,36 +45,8 @@ function CustomStatusEmoji({
     const customStatusExpired = useSelector((state: GlobalState) => isCustomStatusExpired(state, customStatus));
     const customStatusEnabled = useSelector(isCustomStatusEnabled);
 
-    const [placement, setPlacement] = useState('bottom');
     const emojiRef = useRef<HTMLSpanElement>(null);
 
-    useEffect(() => {
-        function handleMouseEnter() {
-            if (emojiRef.current) {
-                const boundingRect = emojiRef.current.getBoundingClientRect();
-                const windowHeight = window.innerHeight;
-                const threshold = windowHeight * 0.8;
-
-                if (boundingRect.bottom >= threshold) {
-                    setPlacement('top');
-                } else {
-                    setPlacement('bottom');
-                }
-            }
-        }
-
-        const emojiElement = emojiRef.current;
-        if (emojiElement) {
-            emojiElement.addEventListener('mouseenter', handleMouseEnter);
-        }
-
-        return () => {
-            if (emojiElement) {
-                emojiElement.removeEventListener('mouseenter', handleMouseEnter);
-            }
-        };
-    }, []);
-
     if (!customStatusEnabled || !customStatus?.emoji || customStatusExpired) {
         return null;
     }
@@ -95,7 +66,6 @@ function CustomStatusEmoji({
 
     return (
         <WithTooltip
-            id='custom-status-tooltip'
             title={
                 <>
                     <div className='custom-status'>
@@ -120,8 +90,7 @@ function CustomStatusEmoji({
                 </>
             }
             emoji={customStatus.emoji}
-            emojiStyle='large'
-            placement={placement}
+            isEmojiLarge={true}
         >
             <span
                 ref={emojiRef}

webapp/channels/src/components/custom_status/custom_status_modal.tsx

@@ -462,7 +462,6 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
                         onClear={clearHandle}
                         className='emoji-quick-input form-control'
                         clearClassName='StatusModal__clear-container'
-                        tooltipPosition='top'
                         onChange={handleTextChange}
                         placeholder={formatMessage({id: 'custom_status.set_status', defaultMessage: 'Set a status'})}
                         autoFocus={true}

webapp/channels/src/components/custom_status/custom_status_suggestion.tsx

@@ -43,14 +43,12 @@ const CustomStatusSuggestion: React.FC<Props> = (props: Props) => {
     const clearButton = handleClear ? (
         <div className='suggestion-clear'>
             <WithTooltip
-                placement='top'
                 title={
                     <FormattedMessage
                         id='custom_status.suggestions.clear'
                         defaultMessage='Clear'
                     />
                 }
-                id='clear-recent-custom-status'
             >
                 <button
                     className='style--none input-clear-x'
@@ -78,7 +76,6 @@ const CustomStatusSuggestion: React.FC<Props> = (props: Props) => {
             </div>
             <CustomStatusText
                 text={text}
-                tooltipDirection='top'
                 className={classNames('statusSuggestion__text', {
                     with_duration: duration,
                 })}

webapp/channels/src/components/custom_status/custom_status_text.test.tsx

@@ -25,7 +25,6 @@ describe('components/custom_status/custom_status_text', () => {
     it('should match snapshot with props', () => {
         const wrapper = mount(
             <CustomStatusText
-                tooltipDirection='top'
                 text='In a meeting'
             />,
             {wrappingComponent: Provider, wrappingComponentProps: {store}},

webapp/channels/src/components/custom_status/custom_status_text.tsx

@@ -11,13 +11,12 @@ import WithTooltip from 'components/with_tooltip';
 import type {GlobalState} from 'types/store';
 
 interface ComponentProps {
-    tooltipDirection?: 'top' | 'right' | 'bottom' | 'left';
     text: string;
     className?: string;
 }
 
 const CustomStatusText = (props: ComponentProps) => {
-    const {tooltipDirection, text, className} = props;
+    const {text, className} = props;
     const customStatusEnabled = useSelector((state: GlobalState) => {
         return isCustomStatusEnabled(state);
     });
@@ -49,8 +48,6 @@ const CustomStatusText = (props: ComponentProps) => {
 
     return (
         <WithTooltip
-            id='custom-status-tooltip'
-            placement={tooltipDirection}
             title={text}
         >
             {customStatusTextComponent}
@@ -59,7 +56,6 @@ const CustomStatusText = (props: ComponentProps) => {
 };
 
 CustomStatusText.defaultProps = {
-    tooltipDirection: 'bottom',
     text: '',
     className: '',
 };

webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap

@@ -5,8 +5,6 @@ exports[`components/drafts/draft_actions/action should match snapshot 1`] = `
   className="DraftAction"
 >
   <WithTooltip
-    id="drafts_action_tooltip_"
-    placement="top"
     title=""
   >
     <button

webapp/channels/src/components/drafts/draft_actions/action.tsx

@@ -26,8 +26,6 @@ function Action({
     return (
         <div className='DraftAction'>
             <WithTooltip
-                id={`drafts_action_tooltip_${id}`}
-                placement='top'
                 title={tooltipText}
             >
                 <button

webapp/channels/src/components/drafts/drafts_link/drafts_link.tsx

@@ -138,8 +138,6 @@ function DraftsLink() {
                         </span>
                     </div>
                     <WithTooltip
-                        placement='right'
-                        id='draft-scheduled-post-tooltip'
                         title={tooltipText}
                     >
                         <div>

webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap

@@ -64,7 +64,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                   <span
                     className="profile-icon "
                   >
-                    <Memo(Avatar)
+                    <Avatar
                       size="md"
                       url="/api/v4/users/user_id/image?_=0"
                       username="username"
@@ -76,7 +76,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                         onError={[Function]}
                         src="/api/v4/users/user_id/image?_=0"
                       />
-                    </Memo(Avatar)>
+                    </Avatar>
                   </span>
                 </button>
               </RoundButton>
@@ -290,7 +290,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                   <span
                     className="profile-icon "
                   >
-                    <Memo(Avatar)
+                    <Avatar
                       size="md"
                       url="/api/v4/users/user_id/image?_=0"
                       username="username"
@@ -302,7 +302,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                         onError={[Function]}
                         src="/api/v4/users/user_id/image?_=0"
                       />
-                    </Memo(Avatar)>
+                    </Avatar>
                   </span>
                 </button>
               </RoundButton>
@@ -522,7 +522,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                   <span
                     className="profile-icon "
                   >
-                    <Memo(Avatar)
+                    <Avatar
                       size="md"
                       url="/api/v4/users/user_id/image?_=0"
                       username="username"
@@ -534,7 +534,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                         onError={[Function]}
                         src="/api/v4/users/user_id/image?_=0"
                       />
-                    </Memo(Avatar)>
+                    </Avatar>
                   </span>
                 </button>
               </RoundButton>
@@ -614,64 +614,59 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                       <Memo(PriorityLabels)
                         canRemove={false}
                         hasError={false}
-                        padding="0 0 0 8px"
                         priority="important"
                         requestedAck={false}
                       >
-                        <Priority
-                          padding="0 0 0 8px"
+                        <div
+                          className="priorityLabelsContainer"
                         >
-                          <div
-                            className="Priority-unHRQ dkJcdD"
+                          <PriorityLabel
+                            priority="important"
+                            size="xs"
                           >
-                            <PriorityLabel
-                              priority="important"
+                            <Memo(Tag)
+                              icon="alert-circle-outline"
                               size="xs"
+                              text="Important"
+                              uppercase={true}
+                              variant="info"
                             >
-                              <Memo(Tag)
-                                icon="alert-circle-outline"
-                                size="xs"
-                                text="Important"
+                              <TagWrapper
+                                as="div"
+                                className="Tag Tag--info Tag--xs"
                                 uppercase={true}
-                                variant="info"
                               >
-                                <TagWrapper
-                                  as="div"
-                                  className="Tag Tag--info Tag--xs"
-                                  uppercase={true}
+                                <div
+                                  className="TagWrapper-keYggn gnIgwl Tag Tag--info Tag--xs"
                                 >
-                                  <div
-                                    className="TagWrapper-keYggn gnIgwl Tag Tag--info Tag--xs"
+                                  <AlertCircleOutlineIcon
+                                    size={10}
                                   >
-                                    <AlertCircleOutlineIcon
-                                      size={10}
+                                    <svg
+                                      fill="currentColor"
+                                      height={10}
+                                      version="1.1"
+                                      viewBox="0 0 24 24"
+                                      width={10}
+                                      xmlns="http://www.w3.org/2000/svg"
                                     >
-                                      <svg
-                                        fill="currentColor"
-                                        height={10}
-                                        version="1.1"
-                                        viewBox="0 0 24 24"
-                                        width={10}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2 M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z M12.501,13h-1l-0.5-6h2L12.501,13z M13,16c0,0.552-0.448,1-1,1s-1-0.448-1-1s0.448-1,1-1S13,15.448,13,16z"
-                                        />
-                                      </svg>
-                                    </AlertCircleOutlineIcon>
-                                    <TagText>
-                                      <span
-                                        className="TagText-bWgUzx kzWPbz"
-                                      >
-                                        Important
-                                      </span>
-                                    </TagText>
-                                  </div>
-                                </TagWrapper>
-                              </Memo(Tag)>
-                            </PriorityLabel>
-                          </div>
-                        </Priority>
+                                      <path
+                                        d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2 M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z M12.501,13h-1l-0.5-6h2L12.501,13z M13,16c0,0.552-0.448,1-1,1s-1-0.448-1-1s0.448-1,1-1S13,15.448,13,16z"
+                                      />
+                                    </svg>
+                                  </AlertCircleOutlineIcon>
+                                  <TagText>
+                                    <span
+                                      className="TagText-bWgUzx kzWPbz"
+                                    >
+                                      Important
+                                    </span>
+                                  </TagText>
+                                </div>
+                              </TagWrapper>
+                            </Memo(Tag)>
+                          </PriorityLabel>
+                        </div>
                       </Memo(PriorityLabels)>
                     </div>
                     <div
@@ -816,7 +811,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                   <span
                     className="profile-icon "
                   >
-                    <Memo(Avatar)
+                    <Avatar
                       size="md"
                       url="/api/v4/users/user_id/image?_=0"
                       username="username"
@@ -828,7 +823,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                         onError={[Function]}
                         src="/api/v4/users/user_id/image?_=0"
                       />
-                    </Memo(Avatar)>
+                    </Avatar>
                   </span>
                 </button>
               </RoundButton>
@@ -908,135 +903,39 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                       <Memo(PriorityLabels)
                         canRemove={false}
                         hasError={false}
-                        padding="0 0 0 8px"
                         priority=""
                         requestedAck={true}
                       >
-                        <Priority
-                          padding="0 0 0 8px"
+                        <div
+                          className="priorityLabelsContainer"
                         >
                           <div
-                            className="Priority-unHRQ dkJcdD"
+                            className="priorityLabelsAcknowledgements"
                           >
-                            <Acknowledgements
-                              hasError={false}
+                            <WithTooltip
+                              title="Acknowledgement will be requested"
                             >
-                              <div
-                                className="Acknowledgements-kPkVCv dNydui"
-                              >
-                                <WithTooltip
-                                  id="post-priority-picker-ack-tooltip"
-                                  placement="top"
-                                  title="Acknowledgement will be requested"
-                                >
-                                  <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",
-                                        ]
-                                      }
-                                    >
-                                      <CheckCircleOutlineIcon
-                                        onBlur={[Function]}
-                                        onClick={null}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        size={14}
-                                      >
-                                        <svg
-                                          fill="currentColor"
-                                          height={14}
-                                          onBlur={[Function]}
-                                          onClick={null}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          version="1.1"
-                                          viewBox="0 0 24 24"
-                                          width={14}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                                          />
-                                        </svg>
-                                      </CheckCircleOutlineIcon>
-                                    </OverlayTrigger>
-                                  </OverlayTrigger>
-                                </WithTooltip>
-                                <FormattedMessage
-                                  defaultMessage="Request acknowledgement"
-                                  id="post_priority.request_acknowledgement"
-                                >
-                                  <span>
-                                    Request acknowledgement
-                                  </span>
-                                </FormattedMessage>
-                              </div>
-                            </Acknowledgements>
+                              <span
+                                className="icon icon-check-circle-outline"
+                                onBlur={[Function]}
+                                onFocus={[Function]}
+                                onKeyDown={[Function]}
+                                onMouseLeave={[Function]}
+                                onMouseMove={[Function]}
+                                onPointerDown={[Function]}
+                                onPointerEnter={[Function]}
+                              />
+                            </WithTooltip>
+                            <FormattedMessage
+                              defaultMessage="Request acknowledgement"
+                              id="post_priority.request_acknowledgement"
+                            >
+                              <span>
+                                Request acknowledgement
+                              </span>
+                            </FormattedMessage>
                           </div>
-                        </Priority>
+                        </div>
                       </Memo(PriorityLabels)>
                     </div>
                     <div

webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap

@@ -138,8 +138,6 @@ exports[`components/drafts/panel/panel_header should show sync icon when draft i
         className="PanelHeader__sync-icon"
       >
         <WithTooltip
-          id="drafts-sync-tooltip"
-          placement="top"
           title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Updated from another device"

webapp/channels/src/components/drafts/panel/panel_body.scss

@@ -4,6 +4,10 @@
 
     &__right {
         flex: 1;
+
+        .priorityLabelsContainer {
+            padding: 0 0 0 8px;
+        }
     }
 
     &.post:hover {

webapp/channels/src/components/drafts/panel/panel_body.tsx

@@ -81,7 +81,6 @@ function PanelBody({
                                 {priority && (
                                     <PriorityLabels
                                         canRemove={false}
-                                        padding='0 0 0 8px'
                                         hasError={false}
                                         persistentNotifications={priority.persistent_notifications}
                                         priority={priority.priority}

webapp/channels/src/components/drafts/panel/panel_header.tsx

@@ -62,8 +62,6 @@ function PanelHeader({
                     {remote && (
                         <div className='PanelHeader__sync-icon'>
                             <WithTooltip
-                                id='drafts-sync-tooltip'
-                                placement='top'
                                 title={
                                     <FormattedMessage
                                         id='drafts.info.sync'