From fd6a662d769b75359f11cb33f2d3c96136f2afd6 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Thu, 19 Dec 2024 03:26:30 +0530
Subject: [PATCH] [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>
---
 .../channels/channel/channel_info_rhs_spec.ts |   24 +-
 .../channel/channel_members_rhs_spec.ts       |    2 +
 .../channel/channel_name_tooltips_spec.ts     |   44 +-
 .../custom_status_expiry_2_spec.ts            |   14 +-
 .../file_preview_audio_spec.js                |   12 +-
 .../file_preview_generic_spec.js              |   10 +-
 .../file_preview_image_spec.js                |   10 +-
 .../file_preview_video_spec.js                |   10 +-
 .../upload_files_not_cloud_spec.js            |    8 +-
 .../upload_files_spec.js                      |   30 +-
 .../playbooks/channels/app_bar_spec.js        |    4 +-
 .../cypress/tests/support/ui/file_preview.js  |    8 +-
 e2e-tests/cypress/tests/support/ui/tooltip.js |    2 +-
 .../setting_picture.test.tsx.snap             |    4 -
 .../size_aware_image.test.tsx.snap            |   12 -
 .../__snapshots__/actions_menu.test.tsx.snap  |    6 -
 .../components/actions_menu/actions_menu.tsx  |    2 -
 .../bleve_settings.test.tsx.snap              |    4 -
 .../cluster_settings.test.tsx.snap            |    8 -
 .../database_settings.test.tsx.snap           |    2 -
 .../elasticsearch_settings.test.tsx.snap      |    4 -
 .../message_export_settings.test.tsx.snap     |    8 -
 .../__snapshots__/push_settings.test.tsx.snap |    4 -
 .../schema_admin_settings.test.tsx.snap       |    2 -
 .../admin_settings/admin_settings.tsx         |    2 -
 .../billing_summary/billing_summary.tsx       |    2 -
 .../brand_image_setting.tsx                   |    8 +-
 .../custom_plugin_settings.test.tsx.snap      |    6 -
 ...om_terms_of_service_settings.test.tsx.snap |    8 -
 .../edit_section_edit_table_row.tsx           |    4 -
 .../list_table/elapsed_duration_cell.tsx      |    2 -
 .../admin_console/old_admin_settings.tsx      |    2 -
 .../permission_description.test.tsx.snap      |  134 +-
 .../permission_description.tsx                |    2 -
 .../permissions_scheme_summary.test.tsx.snap  |    2 -
 .../permissions_scheme_summary.tsx            |    2 -
 .../plugin_management.test.tsx.snap           |   30 -
 .../admin_console/schema_admin_settings.tsx   |    2 -
 .../secure_connections/controls.tsx           |    2 -
 .../system_user_detail/system_user_detail.tsx |    2 -
 .../system_users/system_users.tsx             |    2 -
 .../index.tsx                                 |    3 +-
 .../system_users_export/index.tsx             |    2 -
 .../users_to_remove_groups.test.tsx.snap      |    2 -
 .../group_users/users_to_remove_groups.tsx    |    2 -
 .../team/details/team_profile.tsx             |    6 +-
 .../user_grid/user_grid_role_dropdown.tsx     |    2 -
 .../formatting_bar/formatting_icon.tsx        |    2 -
 .../index.tsx}                                |  100 +-
 .../priority_labels/priority_labels.scss      |   45 +
 .../send_button/send_button.tsx               |    6 +-
 .../send_button/send_post_options/index.tsx   |    2 +-
 .../show_formatting/show_formatting.tsx       |    2 -
 .../toggle_formatting_bar.tsx                 |    2 -
 .../advanced_text_editor/use_emoji_picker.tsx |    2 -
 .../src/components/alert_banner/index.tsx     |    3 +-
 .../__snapshots__/table_chart.test.tsx.snap   |    4 -
 .../analytics/activated_users_card/title.tsx  |    2 -
 .../src/components/analytics/table_chart.tsx  |    2 -
 .../announcement_bar.tsx                      |    6 +-
 .../default_announcement_bar.scss             |    6 +-
 .../components/app_bar/app_bar_binding.tsx    |    3 +-
 .../app_bar/app_bar_marketplace.tsx           |    3 +-
 .../app_bar/app_bar_plugin_component.tsx      |    3 +-
 .../channel_header.test.tsx.snap              |    4 -
 .../channel_header/channel_header.tsx         |    3 -
 .../channel_header/channel_header_title.tsx   |    2 -
 .../channel_header_title_favorite.test.tsx    |   35 +-
 .../channel_header_title_favorite.tsx         |    3 -
 .../components/header_icon_wrapper.tsx        |    4 +-
 .../components/channel_info_rhs/header.tsx    |    2 -
 .../channel_info_rhs/top_buttons.tsx          |    8 -
 .../group_option/group_option.tsx             |    2 -
 .../team_warning_banner.test.tsx.snap         |  222 +--
 .../team_warning_banner.tsx                   |    4 -
 .../components/channel_members_rhs/header.tsx |    2 -
 .../components/channel_members_rhs/member.tsx |    2 -
 .../src/components/common/comment_icon.tsx    |    2 +-
 .../multi_select_cards/multi_select_card.tsx  |    2 -
 .../channels/src/components/copy_button.tsx   |    7 +-
 webapp/channels/src/components/copy_text.tsx  |    6 +-
 .../__snapshots__/team_url.test.tsx.snap      |    2 -
 .../components/team_url/team_url.tsx          |    2 -
 .../custom_status_emoji.test.tsx.snap         |    1 -
 .../custom_status_suggestion.test.tsx.snap    |    2 -
 .../custom_status_text.test.tsx.snap          |    2 -
 .../custom_status_emoji.test.tsx              |    1 -
 .../custom_status/custom_status_emoji.tsx     |   35 +-
 .../custom_status/custom_status_modal.tsx     |    1 -
 .../custom_status_suggestion.tsx              |    3 -
 .../custom_status/custom_status_text.test.tsx |    1 -
 .../custom_status/custom_status_text.tsx      |    6 +-
 .../__snapshots__/action.test.tsx.snap        |    2 -
 .../drafts/draft_actions/action.tsx           |    2 -
 .../drafts/drafts_link/drafts_link.tsx        |    2 -
 .../__snapshots__/panel_body.test.tsx.snap    |  249 +--
 .../__snapshots__/panel_header.test.tsx.snap  |    2 -
 .../components/drafts/panel/panel_body.scss   |    4 +
 .../components/drafts/panel/panel_body.tsx    |    1 -
 .../components/drafts/panel/panel_header.tsx  |    2 -
 .../placeholder_scheduled_posts_title.tsx     |    2 -
 .../components/emoji_picker_category.tsx      |    2 -
 .../components/emoji_picker_skin.tsx          |    2 -
 .../file_attachment.test.tsx.snap             |   16 -
 .../filename_overlay.test.tsx.snap            |   20 +-
 .../file_attachment/file_attachment.tsx       |    4 -
 .../file_attachment/filename_overlay.tsx      |    7 +-
 .../file_preview_modal_footer.test.tsx.snap   |    2 -
 .../file_preview_modal_footer.tsx             |    1 -
 .../file_preview_modal_header.test.tsx.snap   |    2 -
 .../file_preview_modal_header.tsx             |    1 -
 .../file_preview_modal_main_actions.tsx       |   10 -
 .../file_preview_modal_main_nav.test.tsx.snap |    4 -
 .../file_preview_modal_main_nav.tsx           |    4 -
 .../__snapshots__/popover_bar.test.tsx.snap   |    6 -
 .../popover_bar/popover_bar.tsx               |    6 -
 .../file_search_result_item.test.tsx.snap     |   36 +-
 .../file_search_result_item.tsx               |   10 +-
 .../__snapshots__/file_upload.test.tsx.snap   |    2 -
 .../components/file_upload/file_upload.tsx    |    4 -
 .../user_guide_dropdown.test.tsx.snap         |    6 -
 .../user_guide_dropdown.tsx                   |    2 -
 .../history_buttons/history_buttons.tsx       |    4 -
 .../at_mentions_button.test.tsx.snap          |    2 -
 .../at_mentions_button/at_mentions_button.tsx |    2 -
 .../plan_upgrade_button/index.tsx             |    2 -
 .../saved_posts_button.test.tsx.snap          |    2 -
 .../saved_posts_button/saved_posts_button.tsx |    2 -
 .../settings_button/settings_button.tsx       |    2 -
 .../integrations/bots/add_bot/add_bot.tsx     |    2 -
 webapp/channels/src/components/menu/menu.tsx  |    9 +-
 .../new_channel_modal/new_channel_modal.tsx   |    2 -
 .../new_replies_banner/new_replies_banner.tsx |    1 -
 .../marketplace_item/marketplace_item.tsx     |    4 -
 .../src/components/post/post_component.tsx    |    2 -
 .../edited_post_item.test.tsx.snap            |    2 -
 .../edited_post_item/edited_post_item.tsx     |    2 -
 .../src/components/post_emoji/post_emoji.tsx  |    4 +-
 .../post_priority_picker_overlay.tsx          |    2 -
 .../post_attachment_opengraph.tsx             |    2 -
 .../post_edited_indicator.tsx                 |    2 -
 .../post_flag_icon.test.tsx.snap              |    8 +-
 .../post_flag_icon/post_flag_icon.tsx         |    2 +-
 .../__snapshots__/post_reaction.test.tsx.snap |    4 +-
 .../post_view/post_reaction/post_reaction.tsx |    2 +-
 .../post_recent_reactions.tsx                 |    2 +-
 .../post_view/post_time/post_time.tsx         |    2 -
 .../reaction_tooltip/reaction_tooltip.tsx     |    6 +-
 .../reactions_list.test.tsx.snap              |    2 -
 .../post_view/reaction_list/reaction_list.tsx |    2 -
 .../profile_popover_add_to_channel.tsx        |    2 -
 .../index.tsx                                 |    2 -
 .../profile_popover_custom_status.tsx         |    1 -
 .../profile_popover_full_name.tsx             |    1 -
 .../profile_popover_self_user_row.tsx         |    2 -
 .../components/quick_input/quick_input.tsx    |    8 -
 .../rename_channel_modal.test.tsx.snap        |    2 -
 .../rename_channel_modal.tsx                  |    2 -
 .../rhs_card_header/rhs_card_header.tsx       |    6 -
 .../rhs_header_post/rhs_header_post.tsx       |    6 -
 .../channels/src/components/search/search.tsx |    2 +-
 .../user_guide_dropdown.test.tsx.snap         |    4 -
 .../user_guide_dropdown.tsx                   |    2 -
 .../files_filter_menu.test.tsx.snap           |   16 -
 .../search_results/files_filter_menu.tsx      |    2 -
 .../search_results_header.tsx                 |    4 -
 .../src/components/seats_calculator/index.tsx |    3 +-
 .../select_team_item.test.tsx.snap            |    2 -
 .../components/select_team_item.tsx           |    2 -
 .../src/components/setting_picture.tsx        |    2 -
 .../components/shared_channel_indicator.tsx   |    2 -
 .../src/components/shared_user_indicator.tsx  |    4 -
 .../sidebar/add_channel_dropdown.tsx          |    2 -
 .../channel_filter.test.tsx.snap              |    4 -
 .../sidebar/channel_filter/channel_filter.tsx |    7 +-
 .../contents/contents.tsx                     |    3 -
 .../sidebar_category.test.tsx.snap            |    4 -
 .../sidebar_category/sidebar_category.tsx     |    2 -
 .../sidebar_channel_link.test.tsx.snap        |    2 -
 .../sidebar_channel_link.tsx                  |    2 -
 .../sidebar_header/sidebar_header.scss        |   26 +
 .../sidebar/sidebar_header/sidebar_header.tsx |   37 +-
 .../src/components/size_aware_image.tsx       |    4 -
 .../status_dropdown.test.tsx.snap             |   19 -
 .../status_dropdown/status_dropdown.tsx       |    3 -
 .../at_mention_suggestion.test.tsx.snap       |    8 +-
 .../at_mention_suggestion.tsx                 |    1 -
 .../suggestion/search_user_provider.tsx       |    1 -
 .../team_sidebar/components/team_button.tsx   |    8 +-
 .../__snapshots__/thread_footer.test.tsx.snap | 1205 ++++---------
 .../thread_footer/thread_footer.tsx           |    2 -
 .../__snapshots__/thread_item.test.tsx.snap   |    6 -
 .../thread_item/thread_item.tsx               |    2 -
 .../__snapshots__/thread_list.test.tsx.snap   |    2 -
 .../thread_list/thread_list.tsx               |    2 -
 .../__snapshots__/thread_pane.test.tsx.snap   |    2 -
 .../thread_pane/thread_pane.tsx               |    2 -
 .../channels/src/components/toast/toast.tsx   |    4 -
 .../user_group_popover.test.tsx.snap          |  615 ++-----
 .../group_member_list.test.tsx.snap           |  615 ++-----
 .../group_member_list/group_member_list.tsx   |    2 -
 .../components/user_profile/user_profile.tsx  |    1 -
 .../custom_theme_chooser.test.tsx.snap        |    2 -
 .../custom_theme_chooser.tsx                  |    2 -
 .../components/widgets/inputs/input/input.tsx |    2 -
 .../widgets/inputs/url_input/url_input.tsx    |    2 -
 .../menu/menu_items/restricted_indicator.tsx  |    2 -
 .../public-private-selector.tsx               |    2 -
 .../widgets/users/avatar/avatar.tsx           |   15 +-
 .../__snapshots__/avatars.test.tsx.snap       | 1519 +++++------------
 .../widgets/users/avatars/avatars.test.tsx    |   20 +-
 .../widgets/users/avatars/avatars.tsx         |    4 -
 .../tooltip_content.test.tsx.snap             |    0
 .../with_tooltip/create_tooltip.tsx           |  101 --
 .../{with_tooltip_new => }/index.test.tsx     |    0
 .../src/components/with_tooltip/index.tsx     |  246 ++-
 .../with_tooltip/overlay_trigger.tsx          |   66 -
 .../src/components/with_tooltip/shortcut.tsx  |   70 -
 .../{with_tooltip_new => }/tooltip.scss       |    0
 .../src/components/with_tooltip/tooltip.tsx   |   32 -
 .../tooltip_content.test.tsx                  |    0
 .../tooltip_content.tsx                       |    9 +-
 .../tooltip_shortcut.test.tsx                 |    0
 .../tooltip_shortcut.tsx                      |   21 +-
 .../with_tooltip/with_tooltip_new/index.tsx   |  204 ---
 .../channel_header_plug.tsx                   |    2 -
 .../eslint-plugin/configs/.eslintrc.json      |    5 -
 227 files changed, 1676 insertions(+), 4835 deletions(-)
 rename webapp/channels/src/components/advanced_text_editor/{priority_labels.tsx => priority_labels/index.tsx} (59%)
 create mode 100644 webapp/channels/src/components/advanced_text_editor/priority_labels/priority_labels.scss
 create mode 100644 webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.scss
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/__snapshots__/tooltip_content.test.tsx.snap (100%)
 delete mode 100644 webapp/channels/src/components/with_tooltip/create_tooltip.tsx
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/index.test.tsx (100%)
 delete mode 100644 webapp/channels/src/components/with_tooltip/overlay_trigger.tsx
 delete mode 100644 webapp/channels/src/components/with_tooltip/shortcut.tsx
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/tooltip.scss (100%)
 delete mode 100644 webapp/channels/src/components/with_tooltip/tooltip.tsx
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/tooltip_content.test.tsx (100%)
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/tooltip_content.tsx (89%)
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/tooltip_shortcut.test.tsx (100%)
 rename webapp/channels/src/components/with_tooltip/{with_tooltip_new => }/tooltip_shortcut.tsx (74%)
 delete mode 100644 webapp/channels/src/components/with_tooltip/with_tooltip_new/index.tsx

diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts
index 8657d687d4..88ae7cda0e 100644
--- a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts
+++ b/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', () => {
diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_members_rhs_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel/channel_members_rhs_spec.ts
index 8d310a7a62..5bece26d45 100644
--- a/e2e-tests/cypress/tests/integration/channels/channel/channel_members_rhs_spec.ts
+++ b/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');
diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_name_tooltips_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel/channel_name_tooltips_spec.ts
index aae9568166..50cb253df8 100644
--- a/e2e-tests/cypress/tests/integration/channels/channel/channel_name_tooltips_spec.ts
+++ b/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');
+}
diff --git a/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts b/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts
index 9b6a11fb9f..a15928b29c 100644
--- a/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts
+++ b/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', () => {
diff --git a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_audio_spec.js b/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_audio_spec.js
index 4036f837a8..2466a93a9f 100644
--- a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_audio_spec.js
+++ b/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
diff --git a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_generic_spec.js b/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_generic_spec.js
index 4062912d3b..b7e989ff40 100644
--- a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_generic_spec.js
+++ b/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
diff --git a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_image_spec.js b/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_image_spec.js
index 9fb644475e..2dfa97b554 100644
--- a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_image_spec.js
+++ b/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
diff --git a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_video_spec.js b/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_video_spec.js
index 8a756981a8..4a697d3ac0 100644
--- a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_video_spec.js
+++ b/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
diff --git a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_not_cloud_spec.js b/e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_not_cloud_spec.js
index 36e60d9490..7cdfc683db 100644
--- a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_not_cloud_spec.js
+++ b/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});
diff --git a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_spec.js b/e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_spec.js
index 88ba60c450..64ba261aac 100644
--- a/e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_spec.js
+++ b/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
diff --git a/e2e-tests/cypress/tests/integration/playbooks/channels/app_bar_spec.js b/e2e-tests/cypress/tests/integration/playbooks/channels/app_bar_spec.js
index cf31500902..c9b3883584 100644
--- a/e2e-tests/cypress/tests/integration/playbooks/channels/app_bar_spec.js
+++ b/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');
         });
     });
 });
diff --git a/e2e-tests/cypress/tests/support/ui/file_preview.js b/e2e-tests/cypress/tests/support/ui/file_preview.js
index 0a58408cb6..67adfd0154 100644
--- a/e2e-tests/cypress/tests/support/ui/file_preview.js
+++ b/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');
 });
diff --git a/e2e-tests/cypress/tests/support/ui/tooltip.js b/e2e-tests/cypress/tests/support/ui/tooltip.js
index d74768d3a8..a24b922e31 100644
--- a/e2e-tests/cypress/tests/support/ui/tooltip.js
+++ b/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);
 });
diff --git a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
index 529398379e..c708595594 100644
--- a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap b/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap
index 81a4a98320..ded6a94917 100644
--- a/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap b/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap
index f4fd47a674..d5ff073791 100644
--- a/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/actions_menu/actions_menu.tsx b/webapp/channels/src/components/actions_menu/actions_menu.tsx
index a4a5694535..44051a614b 100644
--- a/webapp/channels/src/components/actions_menu/actions_menu.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
index f0e6fdd6c7..415922b02d 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
index 5537bfa513..21ce271223 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
index 56e2eb2a57..cc746a8425 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
@@ -409,8 +409,6 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         }
       />
       <WithTooltip
-        id="error-tooltip"
-        placement="top"
         title=""
       >
         <div
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
index 6e84fd154e..3ab2241372 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
index 195d707ada..c43b40355b 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
index 6965028354..56e5dc2c63 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
index cc9e96ec3f..6f67fed359 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
@@ -675,8 +675,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
       savingMessage="Saving Config..."
     />
     <WithTooltip
-      id="error-tooltip"
-      placement="top"
       title=""
     >
       <div
diff --git a/webapp/channels/src/components/admin_console/admin_settings/admin_settings.tsx b/webapp/channels/src/components/admin_console/admin_settings/admin_settings.tsx
index b362b103e6..92835223f8 100644
--- a/webapp/channels/src/components/admin_console/admin_settings/admin_settings.tsx
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx b/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx
index a4ead23743..0644c752ad 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx b/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
index 828d13ecfc..f058e9bbc0 100644
--- a/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
index 4d3c0592dc..d924330ec2 100644
--- a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
index 79f2c8ff72..4283ebbc40 100644
--- a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx
index 104cd9d784..406892039a 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/list_table/elapsed_duration_cell.tsx b/webapp/channels/src/components/admin_console/list_table/elapsed_duration_cell.tsx
index a3e2ecca3e..cfdfabcba2 100644
--- a/webapp/channels/src/components/admin_console/list_table/elapsed_duration_cell.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/admin_console/old_admin_settings.tsx b/webapp/channels/src/components/admin_console/old_admin_settings.tsx
index df2278e24f..d365ecd5aa 100644
--- a/webapp/channels/src/components/admin_console/old_admin_settings.tsx
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
index c67bc90680..e7231316bc 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
index a1bda1250f..1e4654a64b 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
@@ -68,8 +68,6 @@ const PermissionDescription = ({
 
     return (
         <WithTooltip
-            id={id}
-            placement='top'
             title={content}
             disabled={!showTooltip}
         >
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
index 1d9fb51846..ff4243b6f5 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
index 4801fa7e69..6999d2d1f2 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
index 2ab6c8423c..ecd1238aae 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/admin_console/schema_admin_settings.tsx b/webapp/channels/src/components/admin_console/schema_admin_settings.tsx
index fc80d1b330..00321b798b 100644
--- a/webapp/channels/src/components/admin_console/schema_admin_settings.tsx
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/secure_connections/controls.tsx b/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
index 9ba34793f9..eade0b7511 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx b/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx
index ddf5fcee65..2684f2d324 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/admin_console/system_users/system_users.tsx b/webapp/channels/src/components/admin_console/system_users/system_users.tsx
index d8c9cc54de..e44d3f9050 100644
--- a/webapp/channels/src/components/admin_console/system_users/system_users.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/admin_console/system_users/system_users_column_toggler_menu/index.tsx b/webapp/channels/src/components/admin_console/system_users/system_users_column_toggler_menu/index.tsx
index f7ead6294d..ba541bc9c7 100644
--- a/webapp/channels/src/components/admin_console/system_users/system_users_column_toggler_menu/index.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/admin_console/system_users/system_users_export/index.tsx b/webapp/channels/src/components/admin_console/system_users/system_users_export/index.tsx
index 7a889625a3..9727afe9f2 100644
--- a/webapp/channels/src/components/admin_console/system_users/system_users_export/index.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove_groups.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove_groups.test.tsx.snap
index 184709c313..5081831334 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove_groups.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/users_to_remove_groups.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/users_to_remove_groups.tsx
index 4d74343aae..7afe6d7d03 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/users_to_remove_groups.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx
index a97f6292f8..464932163b 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx
+++ b/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'}
diff --git a/webapp/channels/src/components/admin_console/user_grid/user_grid_role_dropdown.tsx b/webapp/channels/src/components/admin_console/user_grid/user_grid_role_dropdown.tsx
index 3bd122a74f..6a422ad70d 100644
--- a/webapp/channels/src/components/admin_console/user_grid/user_grid_role_dropdown.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
index 52564e5c04..b5aacb39e4 100644
--- a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/advanced_text_editor/priority_labels.tsx b/webapp/channels/src/components/advanced_text_editor/priority_labels/index.tsx
similarity index 59%
rename from webapp/channels/src/components/advanced_text_editor/priority_labels.tsx
rename to webapp/channels/src/components/advanced_text_editor/priority_labels/index.tsx
index e5d674a4ac..e8d9f5df4f 100644
--- a/webapp/channels/src/components/advanced_text_editor/priority_labels.tsx
+++ b/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>
     );
 }
 
diff --git a/webapp/channels/src/components/advanced_text_editor/priority_labels/priority_labels.scss b/webapp/channels/src/components/advanced_text_editor/priority_labels/priority_labels.scss
new file mode 100644
index 0000000000..d1b5ca6337
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx b/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx
index d926b31fd5..edc4e57e8c 100644
--- a/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/index.tsx b/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/index.tsx
index ae4d431702..5951a22d87 100644
--- a/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/index.tsx
+++ b/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',
diff --git a/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx b/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx
index 9016ad8cb6..d423c08ca6 100644
--- a/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx b/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx
index 40b4cbd6cc..db96bb3203 100644
--- a/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx b/webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx
index a6494a6c9f..2970249241 100644
--- a/webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/alert_banner/index.tsx b/webapp/channels/src/components/alert_banner/index.tsx
index a399f5c53e..8af18a1126 100644
--- a/webapp/channels/src/components/alert_banner/index.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap b/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap
index ee7d600f03..753184f8e0 100644
--- a/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap
+++ b/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>
diff --git a/webapp/channels/src/components/analytics/activated_users_card/title.tsx b/webapp/channels/src/components/analytics/activated_users_card/title.tsx
index 68b5a5a79d..d951a3da45 100644
--- a/webapp/channels/src/components/analytics/activated_users_card/title.tsx
+++ b/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
diff --git a/webapp/channels/src/components/analytics/table_chart.tsx b/webapp/channels/src/components/analytics/table_chart.tsx
index d82abb3037..100252b996 100644
--- a/webapp/channels/src/components/analytics/table_chart.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
index fbfa70df0b..81dbe172c6 100644
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/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}
 
diff --git a/webapp/channels/src/components/announcement_bar/default_announcement_bar/default_announcement_bar.scss b/webapp/channels/src/components/announcement_bar/default_announcement_bar/default_announcement_bar.scss
index f3790e673d..46205a5e2f 100644
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/default_announcement_bar.scss
+++ b/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;
 }
diff --git a/webapp/channels/src/components/app_bar/app_bar_binding.tsx b/webapp/channels/src/components/app_bar/app_bar_binding.tsx
index c85822bb02..aaaf05b383 100644
--- a/webapp/channels/src/components/app_bar/app_bar_binding.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/app_bar/app_bar_marketplace.tsx b/webapp/channels/src/components/app_bar/app_bar_marketplace.tsx
index 0c113498eb..4f4bfad282 100644
--- a/webapp/channels/src/components/app_bar/app_bar_marketplace.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/app_bar/app_bar_plugin_component.tsx b/webapp/channels/src/components/app_bar/app_bar_plugin_component.tsx
index f88695b92a..9656de46be 100644
--- a/webapp/channels/src/components/app_bar/app_bar_plugin_component.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
index 5361f1d1fb..71cfd63250 100644
--- a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
+++ b/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>
diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
index ca94f2453f..d12b45d2b0 100644
--- a/webapp/channels/src/components/channel_header/channel_header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_header/channel_header_title.tsx b/webapp/channels/src/components/channel_header/channel_header_title.tsx
index b4873f1fd9..b965ffe18b 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title.tsx
+++ b/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
diff --git a/webapp/channels/src/components/channel_header/channel_header_title_favorite.test.tsx b/webapp/channels/src/components/channel_header/channel_header_title_favorite.test.tsx
index 71c636e71a..4bb7b35f7f 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title_favorite.test.tsx
+++ b/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();
     });
 });
diff --git a/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx b/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx
index 528b6290e9..77e8bcfa19 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
index c7d8b8935e..1e42e948dd 100644
--- a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
+++ b/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}
             >
diff --git a/webapp/channels/src/components/channel_info_rhs/header.tsx b/webapp/channels/src/components/channel_info_rhs/header.tsx
index 1ef6b080a3..0e7cab25a8 100644
--- a/webapp/channels/src/components/channel_info_rhs/header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx b/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
index 51920eb636..61ba4bbee8 100644
--- a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx
index 9e72efa601..37cdea8276 100644
--- a/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
index 112afa1d8e..bdeff13a6e 100644
--- a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx
index 205e0560c3..eea1550d79 100644
--- a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_members_rhs/header.tsx b/webapp/channels/src/components/channel_members_rhs/header.tsx
index d62eac99a1..3239a53b40 100644
--- a/webapp/channels/src/components/channel_members_rhs/header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_members_rhs/member.tsx b/webapp/channels/src/components/channel_members_rhs/member.tsx
index cfe2c40cdd..78aa6f6992 100644
--- a/webapp/channels/src/components/channel_members_rhs/member.tsx
+++ b/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'/>
diff --git a/webapp/channels/src/components/common/comment_icon.tsx b/webapp/channels/src/components/common/comment_icon.tsx
index 91522ea6cb..b63818ec08 100644
--- a/webapp/channels/src/components/common/comment_icon.tsx
+++ b/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';
 
diff --git a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx b/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
index 57e8f8f335..68224aed54 100644
--- a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/copy_button.tsx b/webapp/channels/src/components/copy_button.tsx
index 6eda797966..6e2d1eeadc 100644
--- a/webapp/channels/src/components/copy_button.tsx
+++ b/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
diff --git a/webapp/channels/src/components/copy_text.tsx b/webapp/channels/src/components/copy_text.tsx
index 891d9abaef..4d0d439666 100644
--- a/webapp/channels/src/components/copy_text.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap b/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap
index ae922ac850..def7605c61 100644
--- a/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/create_team/components/team_url/team_url.tsx b/webapp/channels/src/components/create_team/components/team_url/team_url.tsx
index 9838d0a302..9b3f44c44c 100644
--- a/webapp/channels/src/components/create_team/components/team_url/team_url.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap b/webapp/channels/src/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap
index a8ba924b99..3d4f152ded 100644
--- a/webapp/channels/src/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap
+++ b/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"
 />
 `;
diff --git a/webapp/channels/src/components/custom_status/__snapshots__/custom_status_suggestion.test.tsx.snap b/webapp/channels/src/components/custom_status/__snapshots__/custom_status_suggestion.test.tsx.snap
index 22032624fb..3a7b27a199 100644
--- a/webapp/channels/src/components/custom_status/__snapshots__/custom_status_suggestion.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/custom_status/__snapshots__/custom_status_text.test.tsx.snap b/webapp/channels/src/components/custom_status/__snapshots__/custom_status_text.test.tsx.snap
index e0169a58b9..30e86dba74 100644
--- a/webapp/channels/src/components/custom_status/__snapshots__/custom_status_text.test.tsx.snap
+++ b/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"
 />
 `;
diff --git a/webapp/channels/src/components/custom_status/custom_status_emoji.test.tsx b/webapp/channels/src/components/custom_status/custom_status_emoji.test.tsx
index c58cc4706d..da13903bf4 100644
--- a/webapp/channels/src/components/custom_status/custom_status_emoji.test.tsx
+++ b/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}},
         );
diff --git a/webapp/channels/src/components/custom_status/custom_status_emoji.tsx b/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
index efaf070134..daa932298c 100644
--- a/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/custom_status/custom_status_modal.tsx b/webapp/channels/src/components/custom_status/custom_status_modal.tsx
index 1ada59a410..b800d84e83 100644
--- a/webapp/channels/src/components/custom_status/custom_status_modal.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx b/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx
index 43ca8f6ea6..d2cb1eb47d 100644
--- a/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx
+++ b/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,
                 })}
diff --git a/webapp/channels/src/components/custom_status/custom_status_text.test.tsx b/webapp/channels/src/components/custom_status/custom_status_text.test.tsx
index 12a35e4ced..86c9bc29e3 100644
--- a/webapp/channels/src/components/custom_status/custom_status_text.test.tsx
+++ b/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}},
diff --git a/webapp/channels/src/components/custom_status/custom_status_text.tsx b/webapp/channels/src/components/custom_status/custom_status_text.tsx
index 52ccdf7260..60b4005bde 100644
--- a/webapp/channels/src/components/custom_status/custom_status_text.tsx
+++ b/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: '',
 };
diff --git a/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap b/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap
index 95ab53b53b..3d33920ffb 100644
--- a/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/drafts/draft_actions/action.tsx b/webapp/channels/src/components/drafts/draft_actions/action.tsx
index 769674db05..d15b994de0 100644
--- a/webapp/channels/src/components/drafts/draft_actions/action.tsx
+++ b/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
diff --git a/webapp/channels/src/components/drafts/drafts_link/drafts_link.tsx b/webapp/channels/src/components/drafts/drafts_link/drafts_link.tsx
index ba977a4368..a207abf534 100644
--- a/webapp/channels/src/components/drafts/drafts_link/drafts_link.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index 026c6d632e..1eaaa3d21d 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap
index 9df4a4795c..75f9f362ea 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/drafts/panel/panel_body.scss b/webapp/channels/src/components/drafts/panel/panel_body.scss
index 09df5ecb69..1c866ce339 100644
--- a/webapp/channels/src/components/drafts/panel/panel_body.scss
+++ b/webapp/channels/src/components/drafts/panel/panel_body.scss
@@ -4,6 +4,10 @@
 
     &__right {
         flex: 1;
+
+        .priorityLabelsContainer {
+            padding: 0 0 0 8px;
+        }
     }
 
     &.post:hover {
diff --git a/webapp/channels/src/components/drafts/panel/panel_body.tsx b/webapp/channels/src/components/drafts/panel/panel_body.tsx
index 331cb426ea..2863498e64 100644
--- a/webapp/channels/src/components/drafts/panel/panel_body.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/drafts/panel/panel_header.tsx b/webapp/channels/src/components/drafts/panel/panel_header.tsx
index 027f87b331..d327c7625a 100644
--- a/webapp/channels/src/components/drafts/panel/panel_header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/drafts/placeholder_scheduled_post_title/placeholder_scheduled_posts_title.tsx b/webapp/channels/src/components/drafts/placeholder_scheduled_post_title/placeholder_scheduled_posts_title.tsx
index 6b1ce8c303..f5772b0641 100644
--- a/webapp/channels/src/components/drafts/placeholder_scheduled_post_title/placeholder_scheduled_posts_title.tsx
+++ b/webapp/channels/src/components/drafts/placeholder_scheduled_post_title/placeholder_scheduled_posts_title.tsx
@@ -50,8 +50,6 @@ export default function PlaceholderScheduledPostsTitle({type}: Props) {
 
     return (
         <WithTooltip
-            id='scheduled_posts__placeholder'
-            placement={'top'}
             title={tooltipText}
         >
             <div>
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx
index 1bb82a88ab..2427119bb4 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx
@@ -38,8 +38,6 @@ function EmojiPickerCategory({category, categoryRowIndex, selected, enable, onCl
 
     return (
         <WithTooltip
-            id={`emojiPickerCategoryTooltip-${category.name}`}
-            placement='bottom'
             title={
                 <FormattedMessage {...category.label}/>
             }
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx
index 229bfece1e..1e7646ef3b 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx
@@ -173,8 +173,6 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
 
         return (
             <WithTooltip
-                id='emojiPickerSkinTooltip'
-                placement='top'
                 title={expandButtonLabel}
             >
                 <button
diff --git a/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap b/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
index 2109ae56ed..4c6ea4be71 100644
--- a/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
+++ b/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
@@ -3,8 +3,6 @@
 exports[`FileAttachment should match snapshot, after change from file to image 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -99,8 +97,6 @@ exports[`FileAttachment should match snapshot, after change from file to image 1
 exports[`FileAttachment should match snapshot, regular file 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -195,8 +191,6 @@ exports[`FileAttachment should match snapshot, regular file 1`] = `
 exports[`FileAttachment should match snapshot, regular image 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -274,8 +268,6 @@ exports[`FileAttachment should match snapshot, regular image 1`] = `
 exports[`FileAttachment should match snapshot, small image 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -353,8 +345,6 @@ exports[`FileAttachment should match snapshot, small image 1`] = `
 exports[`FileAttachment should match snapshot, svg image 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -449,8 +439,6 @@ exports[`FileAttachment should match snapshot, svg image 1`] = `
 exports[`FileAttachment should match snapshot, when file is not loaded 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -528,8 +516,6 @@ exports[`FileAttachment should match snapshot, when file is not loaded 1`] = `
 exports[`FileAttachment should match snapshot, with compact display 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
@@ -574,8 +560,6 @@ exports[`FileAttachment should match snapshot, with compact display 1`] = `
 exports[`FileAttachment should match snapshot, without compact display and without can download 1`] = `
 <WithTooltip
   disabled={true}
-  id="fileAttachmentArchivedTooltip"
-  placement="top"
   title={<ArchivedTooltip />}
 >
   <div
diff --git a/webapp/channels/src/components/file_attachment/__snapshots__/filename_overlay.test.tsx.snap b/webapp/channels/src/components/file_attachment/__snapshots__/filename_overlay.test.tsx.snap
index e8c5bf95fa..08c09de4b5 100644
--- a/webapp/channels/src/components/file_attachment/__snapshots__/filename_overlay.test.tsx.snap
+++ b/webapp/channels/src/components/file_attachment/__snapshots__/filename_overlay.test.tsx.snap
@@ -2,8 +2,6 @@
 
 exports[`components/file_attachment/FilenameOverlay should match snapshot, compact display 1`] = `
 <WithTooltip
-  id="file-name__tooltip"
-  placement="top"
   title="test_filename"
 >
   <a
@@ -33,9 +31,12 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, stand
   className="post-image__name"
 >
   <WithTooltip
-    id="file-name__tooltip"
-    placement="top"
-    title="Download"
+    title={
+      Object {
+        "defaultMessage": "Download",
+        "id": "view_image_popover.download",
+      }
+    }
   >
     <ForwardRef
       aria-label="download"
@@ -54,9 +55,12 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, with
   className="post-image__name"
 >
   <WithTooltip
-    id="file-name__tooltip"
-    placement="top"
-    title="Download"
+    title={
+      Object {
+        "defaultMessage": "Download",
+        "id": "view_image_popover.download",
+      }
+    }
   >
     <ForwardRef
       aria-label="download"
diff --git a/webapp/channels/src/components/file_attachment/file_attachment.tsx b/webapp/channels/src/components/file_attachment/file_attachment.tsx
index 073eef7923..e69a15364d 100644
--- a/webapp/channels/src/components/file_attachment/file_attachment.tsx
+++ b/webapp/channels/src/components/file_attachment/file_attachment.tsx
@@ -220,9 +220,7 @@ export default function FileAttachment(props: Props) {
                 stopPropagationOnToggle={true}
             >
                 <WithTooltip
-                    id='file-name__tooltip'
                     title={formatMessage({id: 'file_search_result_item.more_actions', defaultMessage: 'More Actions'})}
-                    placement='top'
                 >
                     <button
                         ref={buttonRef}
@@ -359,8 +357,6 @@ export default function FileAttachment(props: Props) {
 
     return (
         <WithTooltip
-            id='fileAttachmentArchivedTooltip'
-            placement='top'
             title={<ArchivedTooltip/>}
             disabled={!fileInfo.archived}
         >
diff --git a/webapp/channels/src/components/file_attachment/filename_overlay.tsx b/webapp/channels/src/components/file_attachment/filename_overlay.tsx
index af6e85679e..2589e640f3 100644
--- a/webapp/channels/src/components/file_attachment/filename_overlay.tsx
+++ b/webapp/channels/src/components/file_attachment/filename_overlay.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {defineMessage} from 'react-intl';
 
 import type {FileInfo} from '@mattermost/types/files';
 
@@ -65,9 +66,7 @@ export default class FilenameOverlay extends React.PureComponent<Props> {
         if (compactDisplay) {
             filenameOverlay = (
                 <WithTooltip
-                    id='file-name__tooltip'
                     title={fileName}
-                    placement='top'
                 >
                     <a
                         href='#'
@@ -84,9 +83,7 @@ export default class FilenameOverlay extends React.PureComponent<Props> {
             filenameOverlay = (
                 <div className={iconClass || 'post-image__name'}>
                     <WithTooltip
-                        id='file-name__tooltip'
-                        title={localizeMessage({id: 'view_image_popover.download', defaultMessage: 'Download'})}
-                        placement='top'
+                        title={defineMessage({id: 'view_image_popover.download', defaultMessage: 'Download'})}
                     >
                         <ExternalLink
                             href={getFileDownloadUrl(fileInfo.id)}
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/__snapshots__/file_preview_modal_footer.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/__snapshots__/file_preview_modal_footer.test.tsx.snap
index 97748c5a8f..cce0a9b93c 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/__snapshots__/file_preview_modal_footer.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/__snapshots__/file_preview_modal_footer.test.tsx.snap
@@ -69,7 +69,6 @@ exports[`components/file_preview_modal/file_preview_modal_footer/FilePreviewModa
     showOnlyClose={false}
     showPublicLink={false}
     totalFiles={3}
-    usedInside="Footer"
   />
 </div>
 `;
@@ -143,7 +142,6 @@ exports[`components/file_preview_modal/file_preview_modal_footer/FilePreviewModa
     showOnlyClose={false}
     showPublicLink={false}
     totalFiles={3}
-    usedInside="Footer"
   />
 </div>
 `;
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/file_preview_modal_footer.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/file_preview_modal_footer.tsx
index 532950a6e0..4a9e5320fe 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/file_preview_modal_footer.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_footer/file_preview_modal_footer.tsx
@@ -37,7 +37,6 @@ const FilePreviewModalFooter: React.FC<Props> = ({post, ...actionProps}: Props)
             <FilePreviewModalMainActions
                 {...actionProps}
                 showClose={false}
-                usedInside='Footer'
                 showOnlyClose={false}
             />
         </div>
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/__snapshots__/file_preview_modal_header.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/__snapshots__/file_preview_modal_header.test.tsx.snap
index e4f883a48a..23ca45c7e9 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/__snapshots__/file_preview_modal_header.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/__snapshots__/file_preview_modal_header.test.tsx.snap
@@ -48,7 +48,6 @@ exports[`components/file_preview_modal/file_preview_modal_header/FilePreviewModa
     onGetPublicLink={[MockFunction]}
     showOnlyClose={false}
     showPublicLink={false}
-    usedInside="Header"
   />
 </div>
 `;
@@ -90,7 +89,6 @@ exports[`components/file_preview_modal/file_preview_modal_header/FilePreviewModa
     onGetPublicLink={[MockFunction]}
     showOnlyClose={true}
     showPublicLink={false}
-    usedInside="Header"
   />
   <Memo(FilePreviewModalMainNav)
     fileIndex={1}
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/file_preview_modal_header.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/file_preview_modal_header.tsx
index cb46eb851b..4328bae454 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/file_preview_modal_header.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_header/file_preview_modal_header.tsx
@@ -48,7 +48,6 @@ const FilePreviewModalHeader: React.FC<Props> = ({post, totalFiles, fileIndex, .
         <FilePreviewModalMainActions
             {...actionProps}
             showOnlyClose={actionProps.isMobileView}
-            usedInside='Header'
         />);
     return (
         <div className='file-preview-modal-header'>
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_actions/file_preview_modal_main_actions.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_actions/file_preview_modal_main_actions.tsx
index 20072704ea..ea089e3430 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_actions/file_preview_modal_main_actions.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_actions/file_preview_modal_main_actions.tsx
@@ -27,7 +27,6 @@ import './file_preview_modal_main_actions.scss';
 const COPIED_TOOLTIP_DURATION = 2000;
 
 interface Props {
-    usedInside?: 'Header' | 'Footer';
     showOnlyClose?: boolean;
     showClose?: boolean;
     showPublicLink?: boolean;
@@ -44,7 +43,6 @@ interface Props {
 const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
     const intl = useIntl();
 
-    const tooltipPlacement = props.usedInside === 'Header' ? 'bottom' : 'top';
     const selectedFilePublicLink = useSelector((state: GlobalState) => selectFilePublicLink(state)?.link);
     const dispatch = useDispatch();
     const [publicLinkCopied, setPublicLinkCopied] = useState(false);
@@ -74,9 +72,7 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
     });
     const closeButton = (
         <WithTooltip
-            id='close-icon-tooltip'
             title={closeMessage}
-            placement={tooltipPlacement}
             key='publicLink'
         >
             <button
@@ -103,9 +99,7 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
     }
     const publicLink = (
         <WithTooltip
-            id='link-variant-icon-tooltip.text'
             key='filePreviewPublicLink'
-            placement={tooltipPlacement}
             title={publicTooltipMessage}
         >
             <a
@@ -125,9 +119,7 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
     });
     const download = (
         <WithTooltip
-            id='download-icon-tooltip.text'
             key='download'
-            placement={tooltipPlacement}
             title={downloadMessage}
         >
             <ExternalLink
@@ -146,7 +138,6 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
         <CopyButton
             className='file-preview-modal-main-actions__action-item'
             isForText={getFileType(props.fileInfo.extension) === FileTypes.TEXT}
-            placement={tooltipPlacement}
             content={props.content}
         />
     );
@@ -162,7 +153,6 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
 
 FilePreviewModalMainActions.defaultProps = {
     showOnlyClose: false,
-    usedInside: 'Header',
     showClose: true,
     showPublicLink: true,
 };
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
index 510d9aae7e..1e68c71659 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
@@ -5,9 +5,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
   className="file_preview_modal_main_nav"
 >
   <WithTooltip
-    id="close-icon-tooltip"
     key="previewArrowLeft"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Close"
@@ -40,9 +38,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
     />
   </span>
   <WithTooltip
-    id="close-icon-tooltip"
     key="publicLink"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Next"
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
index 4315699ccb..02f402c31b 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
@@ -19,14 +19,12 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
     const leftArrow = (
         <WithTooltip
             key='previewArrowLeft'
-            id='close-icon-tooltip'
             title={
                 <FormattedMessage
                     id='generic.close'
                     defaultMessage='Close'
                 />
             }
-            placement='bottom'
         >
             <button
                 id='previewArrowLeft'
@@ -41,14 +39,12 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
     const rightArrow = (
         <WithTooltip
             key='publicLink'
-            id='close-icon-tooltip'
             title={
                 <FormattedMessage
                     id='generic.next'
                     defaultMessage='Next'
                 />
             }
-            placement='bottom'
         >
             <button
                 id='previewArrowRight'
diff --git a/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
index 7c7191447a..c8660c8ee4 100644
--- a/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
@@ -9,9 +9,7 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
     className="modal-column"
   >
     <WithTooltip
-      id="zoom-out-icon-tooltip"
       key="zoomOut"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Zoom Out"
@@ -28,9 +26,7 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
       </span>
     </WithTooltip>
     <WithTooltip
-      id="zoom-reset-icon-tooltip"
       key="zoomReset"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Reset Zoom"
@@ -47,9 +43,7 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
       </span>
     </WithTooltip>
     <WithTooltip
-      id="zoom-in-icon-tooltip"
       key="zoomIn"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Zoom In"
diff --git a/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx b/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
index c207c91848..825f60eff2 100644
--- a/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
+++ b/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
@@ -44,14 +44,12 @@ export default class PopoverBar extends React.PureComponent<Props> {
             zoomControls.push(
                 <WithTooltip
                     key='zoomOut'
-                    id='zoom-out-icon-tooltip'
                     title={
                         <FormattedMessage
                             id='view_image.zoom_out'
                             defaultMessage='Zoom Out'
                         />
                     }
-                    placement='top'
                 >
                     {zoomOutButton}
                 </WithTooltip>,
@@ -83,14 +81,12 @@ export default class PopoverBar extends React.PureComponent<Props> {
             zoomControls.push(
                 <WithTooltip
                     key='zoomReset'
-                    id='zoom-reset-icon-tooltip'
                     title={
                         <FormattedMessage
                             id='view_image.zoom_reset'
                             defaultMessage='Reset Zoom'
                         />
                     }
-                    placement='top'
                 >
                     {zoomResetButton}
                 </WithTooltip>,
@@ -115,14 +111,12 @@ export default class PopoverBar extends React.PureComponent<Props> {
             zoomControls.push(
                 <WithTooltip
                     key='zoomIn'
-                    id='zoom-in-icon-tooltip'
                     title={
                         <FormattedMessage
                             id='view_image.zoom_in'
                             defaultMessage='Zoom In'
                         />
                     }
-                    placement='top'
                 >
                     {zoomInButton}
                 </WithTooltip>,
diff --git a/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap b/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
index 6979e822ab..a9266c1026 100644
--- a/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
+++ b/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
@@ -76,9 +76,12 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
       </div>
     </div>
     <WithTooltip
-      id="file-name__tooltip"
-      placement="top"
-      title="Download"
+      title={
+        Object {
+          "defaultMessage": "Download",
+          "id": "file_search_result_item.download",
+        }
+      }
     >
       <a
         className="action-icon download-icon"
@@ -179,9 +182,12 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
       </div>
     </div>
     <WithTooltip
-      id="file-name__tooltip"
-      placement="top"
-      title="Download"
+      title={
+        Object {
+          "defaultMessage": "Download",
+          "id": "file_search_result_item.download",
+        }
+      }
     >
       <a
         className="action-icon download-icon"
@@ -282,9 +288,12 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
       </div>
     </div>
     <WithTooltip
-      id="file-name__tooltip"
-      placement="top"
-      title="Download"
+      title={
+        Object {
+          "defaultMessage": "Download",
+          "id": "file_search_result_item.download",
+        }
+      }
     >
       <a
         className="action-icon download-icon"
@@ -380,9 +389,12 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
       </div>
     </div>
     <WithTooltip
-      id="file-name__tooltip"
-      placement="top"
-      title="Download"
+      title={
+        Object {
+          "defaultMessage": "Download",
+          "id": "file_search_result_item.download",
+        }
+      }
     >
       <a
         className="action-icon download-icon"
diff --git a/webapp/channels/src/components/file_search_results/file_search_result_item.tsx b/webapp/channels/src/components/file_search_results/file_search_result_item.tsx
index d36065d725..99b055d116 100644
--- a/webapp/channels/src/components/file_search_results/file_search_result_item.tsx
+++ b/webapp/channels/src/components/file_search_results/file_search_result_item.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import {getFileDownloadUrl} from 'mattermost-redux/utils/file_utils';
 
@@ -146,9 +146,7 @@ export default class FileSearchResultItem extends React.PureComponent<Props, Sta
                     </div>
                     {this.props.fileInfo.post_id && (
                         <WithTooltip
-                            id='file-name__tooltip'
-                            title={localizeMessage({id: 'file_search_result_item.more_actions', defaultMessage: 'More Actions'})}
-                            placement={'top'}
+                            title={defineMessage({id: 'file_search_result_item.more_actions', defaultMessage: 'More Actions'})}
                         >
                             <MenuWrapper
                                 onToggle={this.keepOpen}
@@ -180,9 +178,7 @@ export default class FileSearchResultItem extends React.PureComponent<Props, Sta
                         </WithTooltip>
                     )}
                     <WithTooltip
-                        id='file-name__tooltip'
-                        title={localizeMessage({id: 'file_search_result_item.download', defaultMessage: 'Download'})}
-                        placement={'top'}
+                        title={defineMessage({id: 'file_search_result_item.download', defaultMessage: 'Download'})}
                     >
                         <a
                             className='action-icon download-icon'
diff --git a/webapp/channels/src/components/file_upload/__snapshots__/file_upload.test.tsx.snap b/webapp/channels/src/components/file_upload/__snapshots__/file_upload.test.tsx.snap
index a186d0216e..484cc1efae 100644
--- a/webapp/channels/src/components/file_upload/__snapshots__/file_upload.test.tsx.snap
+++ b/webapp/channels/src/components/file_upload/__snapshots__/file_upload.test.tsx.snap
@@ -6,8 +6,6 @@ exports[`components/FileUpload should match snapshot 1`] = `
 >
   <div>
     <WithTooltip
-      id="upload-tooltip"
-      placement="top"
       title={
         <Memo(KeyboardShortcutSequence)
           hoistDescription={true}
diff --git a/webapp/channels/src/components/file_upload/file_upload.tsx b/webapp/channels/src/components/file_upload/file_upload.tsx
index 1dacd7f1e8..26527199f0 100644
--- a/webapp/channels/src/components/file_upload/file_upload.tsx
+++ b/webapp/channels/src/components/file_upload/file_upload.tsx
@@ -569,8 +569,6 @@ export class FileUpload extends PureComponent<Props, State> {
             bodyAction = (
                 <div>
                     <WithTooltip
-                        id='upload-tooltip'
-                        placement='top'
                         title={
                             <KeyboardShortcutSequence
                                 shortcut={KEYBOARD_SHORTCUTS.filesUpload}
@@ -645,8 +643,6 @@ export class FileUpload extends PureComponent<Props, State> {
                     />
                     <MenuWrapper>
                         <WithTooltip
-                            id='upload-tooltip'
-                            placement='top'
                             title={
                                 <KeyboardShortcutSequence
                                     shortcut={KEYBOARD_SHORTCUTS.filesUpload}
diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index d356f8c5f7..ceb56273bd 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
@@ -8,8 +8,6 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   onToggle={[Function]}
 >
   <WithTooltip
-    id="userGuideHelpTooltip"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Help"
@@ -85,8 +83,6 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   onToggle={[Function]}
 >
   <WithTooltip
-    id="userGuideHelpTooltip"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Help"
@@ -154,8 +150,6 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   onToggle={[Function]}
 >
   <WithTooltip
-    id="userGuideHelpTooltip"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Help"
diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
index a526e614d7..62cc4dfbff 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
+++ b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
@@ -136,8 +136,6 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
                 onToggle={this.buttonToggleState}
             >
                 <WithTooltip
-                    id='userGuideHelpTooltip'
-                    placement='bottom'
                     title={tooltipText}
                 >
                     <IconButton
diff --git a/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx b/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx
index 2fee9cfd48..798f59bfed 100644
--- a/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx
+++ b/webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx
@@ -73,8 +73,6 @@ const HistoryButtons = (): JSX.Element => {
     return (
         <HistoryButtonsContainer>
             <WithTooltip
-                id='global_header_history_back'
-                placement='bottom'
                 title={getTooltip(KEYBOARD_SHORTCUTS.browserChannelPrev)}
             >
                 <IconButton
@@ -88,8 +86,6 @@ const HistoryButtons = (): JSX.Element => {
                 />
             </WithTooltip>
             <WithTooltip
-                id='global_header_history_forward'
-                placement='bottom'
                 title={getTooltip(KEYBOARD_SHORTCUTS.browserChannelNext)}
             >
                 <IconButton
diff --git a/webapp/channels/src/components/global_header/right_controls/at_mentions_button/__snapshots__/at_mentions_button.test.tsx.snap b/webapp/channels/src/components/global_header/right_controls/at_mentions_button/__snapshots__/at_mentions_button.test.tsx.snap
index 5a0d2082ac..035cf7a448 100644
--- a/webapp/channels/src/components/global_header/right_controls/at_mentions_button/__snapshots__/at_mentions_button.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/right_controls/at_mentions_button/__snapshots__/at_mentions_button.test.tsx.snap
@@ -2,8 +2,6 @@
 
 exports[`components/global/AtMentionsButton should match snapshot 1`] = `
 <WithTooltip
-  id="recentMentions"
-  placement="bottom"
   title={
     <React.Fragment>
       <Memo(MemoizedFormattedMessage)
diff --git a/webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx b/webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx
index 361658b0e3..5b5c42e169 100644
--- a/webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx
@@ -33,8 +33,6 @@ const AtMentionsButton = (): JSX.Element => {
 
     return (
         <WithTooltip
-            id='recentMentions'
-            placement='bottom'
             title={
                 <>
                     <FormattedMessage
diff --git a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
index 4b2d269647..71b9db3cba 100644
--- a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
@@ -84,9 +84,7 @@ const PlanUpgradeButton = (): JSX.Element | null => {
 
     return (
         <WithTooltip
-            id='upgrade_button_tooltip'
             title={formatMessage({id: 'pricing_modal.btn.tooltip', defaultMessage: 'Only visible to system admins'})}
-            placement='bottom'
         >
             <UpgradeButton
                 id='UpgradeButton'
diff --git a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
index 455473acc6..053966d4e8 100644
--- a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
@@ -2,8 +2,6 @@
 
 exports[`components/global/AtMentionsButton should match snapshot 1`] = `
 <WithTooltip
-  id="recentMentions"
-  placement="bottom"
   title={
     <Memo(MemoizedFormattedMessage)
       defaultMessage="Saved messages"
diff --git a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
index 4bed67de43..a31e603b79 100644
--- a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
@@ -32,14 +32,12 @@ const SavedPostsButton = (): JSX.Element | null => {
 
     return (
         <WithTooltip
-            id='recentMentions'
             title={
                 <FormattedMessage
                     id='channel_header.flagged'
                     defaultMessage='Saved messages'
                 />
             }
-            placement='bottom'
         >
             <IconButton
                 size={'sm'}
diff --git a/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx b/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx
index 139d946860..75d017986c 100644
--- a/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx
@@ -24,14 +24,12 @@ const SettingsButton = (props: Props): JSX.Element | null => {
 
     return (
         <WithTooltip
-            id='productSettings'
             title={
                 <FormattedMessage
                     id='global_header.productSettings'
                     defaultMessage='Settings'
                 />
             }
-            placement='bottom'
         >
             <IconButton
                 size={'sm'}
diff --git a/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx b/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
index 3c5249d93d..2489c62a51 100644
--- a/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
+++ b/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
@@ -423,8 +423,6 @@ export default class AddBot extends React.PureComponent<Props, State> {
         let imageURL = '';
         let removeImageIcon: JSX.Element | null = (
             <WithTooltip
-                id='removeIcon'
-                placement='right'
                 title={
                     <FormattedMessage
                         id='bot.remove_profile_picture'
diff --git a/webapp/channels/src/components/menu/menu.tsx b/webapp/channels/src/components/menu/menu.tsx
index 625bb44325..06c0d29b86 100644
--- a/webapp/channels/src/components/menu/menu.tsx
+++ b/webapp/channels/src/components/menu/menu.tsx
@@ -45,9 +45,10 @@ type MenuButtonProps = {
 
 type MenuButtonTooltipProps = {
     id: string;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    isVertical?: boolean;
     class?: string;
     text: string;
+    disabled?: boolean;
 }
 
 type MenuProps = {
@@ -84,7 +85,6 @@ interface Props {
         vertical: VerticalOrigin;
         horizontal: HorizontalOrigin;
     };
-    hideTooltipWhenDisabled?: boolean;
 }
 
 /**
@@ -206,10 +206,9 @@ export function Menu(props: Props) {
         if (props.menuButtonTooltip && props.menuButtonTooltip.text && !isMobileView) {
             return (
                 <WithTooltip
-                    id={props.menuButtonTooltip.id}
                     title={props.menuButtonTooltip.text}
-                    placement={props?.menuButtonTooltip?.placement ?? 'top'}
-                    disabled={props.hideTooltipWhenDisabled ? props.menuButton.disabled || isMenuOpen : isMenuOpen}
+                    isVertical={props.menuButtonTooltip?.isVertical ?? true}
+                    disabled={isMenuOpen || props.menuButton?.disabled}
                 >
                     {triggerElement}
                 </WithTooltip>
diff --git a/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx b/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx
index 1e7a1c6764..105bac64bd 100644
--- a/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx
+++ b/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx
@@ -221,7 +221,6 @@ const NewChannelModal = () => {
 
     const newBoardInfoIcon = (
         <WithTooltip
-            id='new-channel-with-board-tooltip'
             title={
                 <>
                     <div className='title'>
@@ -238,7 +237,6 @@ const NewChannelModal = () => {
                     </div>
                 </>
             }
-            placement='right'
         >
             <i className='icon-information-outline'/>
         </WithTooltip>
diff --git a/webapp/channels/src/components/new_replies_banner/new_replies_banner.tsx b/webapp/channels/src/components/new_replies_banner/new_replies_banner.tsx
index e533d2d5d1..ecbba0aaaf 100644
--- a/webapp/channels/src/components/new_replies_banner/new_replies_banner.tsx
+++ b/webapp/channels/src/components/new_replies_banner/new_replies_banner.tsx
@@ -62,7 +62,6 @@ function NewRepliesBanner({
                 onClick={onClick}
                 onDismiss={onDismiss}
                 onClickMessage={onClickMessage}
-                overlayPlacement='top'
                 width={156}
             >
                 <FormattedMessage
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx
index 254de5b917..63520e3c78 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx
@@ -26,9 +26,7 @@ export const Label = ({name, description, url}: MarketplaceLabel): JSX.Element =
     if (description) {
         label = (
             <WithTooltip
-                id={'plugin-marketplace_label_' + name.toLowerCase() + '-tooltip'}
                 title={description}
-                placement='top'
             >
                 {tag}
             </WithTooltip>
@@ -137,9 +135,7 @@ export default class MarketplaceItem extends React.PureComponent <MarketplaceIte
         if (this.state.showTooltip) {
             description = (
                 <WithTooltip
-                    id='marketplace-item-description__tooltip'
                     title={descriptionText || ''}
-                    placement='top'
                 >
                     {description}
                 </WithTooltip>
diff --git a/webapp/channels/src/components/post/post_component.tsx b/webapp/channels/src/components/post/post_component.tsx
index 85e2e02fb2..482760e2e6 100644
--- a/webapp/channels/src/components/post/post_component.tsx
+++ b/webapp/channels/src/components/post/post_component.tsx
@@ -594,14 +594,12 @@ const PostComponent = (props: Props): JSX.Element => {
                                 {priority}
                                 {post.props && post.props.card &&
                                     <WithTooltip
-                                        id='post_info.info.view_additional_info'
                                         title={
                                             <FormattedMessage
                                                 id='post_info.info.view_additional_info'
                                                 defaultMessage='View additional info'
                                             />
                                         }
-                                        placement='top'
                                     >
                                         <button
                                             className={'card-icon__container icon--show style--none ' + (props.isCardOpen ? 'active' : '')}
diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
index 6a99a84259..746822c1d4 100644
--- a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
+++ b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
@@ -86,8 +86,6 @@ exports[`components/post_edit_history/edited_post_item should match snapshot 1`]
           </span>
         </div>
         <WithTooltip
-          id="editPostRestoreTooltip"
-          placement="left"
           title="Restore this version"
         >
           <ForwardRef
diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
index f9e605ae1d..0bf220f2ce 100644
--- a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
+++ b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
@@ -173,8 +173,6 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, theme, act
 
     const restoreButton = isCurrent ? null : (
         <WithTooltip
-            id='editPostRestoreTooltip'
-            placement='left'
             title={formatMessage(itemMessages.helpText)}
         >
             <IconButton
diff --git a/webapp/channels/src/components/post_emoji/post_emoji.tsx b/webapp/channels/src/components/post_emoji/post_emoji.tsx
index f9e735a97a..effb4c1d6e 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.tsx
+++ b/webapp/channels/src/components/post_emoji/post_emoji.tsx
@@ -21,11 +21,9 @@ const PostEmoji = ({children, name, imageUrl}: Props) => {
 
     return (
         <WithTooltip
-            id='postEmoji__tooltip'
             title={emojiText}
             emoji={name}
-            emojiStyle='large'
-            placement='top'
+            isEmojiLarge={true}
         >
             <span
                 className='emoticon'
diff --git a/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx b/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx
index ddefc450d0..9418368dee 100644
--- a/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx
+++ b/webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx
@@ -86,8 +86,6 @@ function PostPriorityPickerOverlay({
     return (
         <>
             <WithTooltip
-                id='postPriorityPickerOverlayTooltip'
-                placement='top'
                 title={messagePriority}
             >
                 <IconContainer
diff --git a/webapp/channels/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.tsx b/webapp/channels/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.tsx
index ec877776e2..93d8c21764 100644
--- a/webapp/channels/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.tsx
+++ b/webapp/channels/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.tsx
@@ -130,8 +130,6 @@ const PostAttachmentOpenGraph = ({openGraphData, post, actions, link, isInPermal
         >
             {rest.currentUserId === post.user_id && !isInPermalink && (
                 <WithTooltip
-                    id={`removeLinkPreview-${post.id}`}
-                    placement='top'
                     title={formatMessage({id: 'link_preview.remove_link_preview', defaultMessage: 'Remove link preview'})}
                 >
                     <button
diff --git a/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx b/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx
index 1f050c19ae..f86a38baa8 100644
--- a/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx
+++ b/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx
@@ -95,8 +95,6 @@ const PostEditedIndicator = ({postId, isMilitaryTime, timeZone, editedAt = 0, po
 
     return !postId || editedAt === 0 ? null : (
         <WithTooltip
-            placement='top'
-            id={`edited-post-tooltip_${postId}`}
             title={
                 <>
                     {`${editedText} ${formattedTime}`}
diff --git a/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap b/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
index 7f5e9329fc..0bbdae6457 100644
--- a/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_view/PostFlagIcon should match snapshot 1`] = `
-<Memo(WithTooltip)
+<WithTooltip
   key="flagtooltipkey"
   title={
     <Memo(MemoizedFormattedMessage)
@@ -20,11 +20,11 @@ exports[`components/post_view/PostFlagIcon should match snapshot 1`] = `
       className="icon icon--small"
     />
   </button>
-</Memo(WithTooltip)>
+</WithTooltip>
 `;
 
 exports[`components/post_view/PostFlagIcon should match snapshot 2`] = `
-<Memo(WithTooltip)
+<WithTooltip
   key="flagtooltipkeyflagged"
   title={
     <Memo(MemoizedFormattedMessage)
@@ -43,5 +43,5 @@ exports[`components/post_view/PostFlagIcon should match snapshot 2`] = `
       className="icon icon--small icon--small-filled post-menu__item--selected"
     />
   </button>
-</Memo(WithTooltip)>
+</WithTooltip>
 `;
diff --git a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
index 0ccc6da973..9ea1264f64 100644
--- a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
+++ b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
@@ -7,7 +7,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import FlagIcon from 'components/widgets/icons/flag_icon';
 import FlagIconFilled from 'components/widgets/icons/flag_icon_filled';
-import WithTooltip from 'components/with_tooltip/with_tooltip_new';
+import WithTooltip from 'components/with_tooltip';
 
 import {Locations, A11yCustomEventTypes} from 'utils/constants';
 
diff --git a/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap b/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
index b360916525..ff24080843 100644
--- a/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
     target={[MockFunction]}
     topOffset={-7}
   />
-  <Memo(WithTooltip)
+  <WithTooltip
     title={
       Object {
         "defaultMessage": "Add Reaction",
@@ -36,6 +36,6 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
         className="icon icon--small"
       />
     </button>
-  </Memo(WithTooltip)>
+  </WithTooltip>
 </Memo(ChannelPermissionGate)>
 `;
diff --git a/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx b/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
index c63d5b3032..06812ba73d 100644
--- a/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
+++ b/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
@@ -14,7 +14,7 @@ import {getEmojiName} from 'mattermost-redux/utils/emoji_utils';
 import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
 import EmojiIcon from 'components/widgets/icons/emoji_icon';
-import WithTooltip from 'components/with_tooltip/with_tooltip_new';
+import WithTooltip from 'components/with_tooltip';
 
 import {Locations} from 'utils/constants';
 
diff --git a/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx b/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
index 84bc317279..cb445b201d 100644
--- a/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
+++ b/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
@@ -9,7 +9,7 @@ import Permissions from 'mattermost-redux/constants/permissions';
 import {getEmojiName} from 'mattermost-redux/utils/emoji_utils';
 
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
-import WithTooltip from 'components/with_tooltip/with_tooltip_new';
+import WithTooltip from 'components/with_tooltip';
 
 import {Locations} from 'utils/constants';
 
diff --git a/webapp/channels/src/components/post_view/post_time/post_time.tsx b/webapp/channels/src/components/post_view/post_time/post_time.tsx
index 470ff931c8..9443c3ec58 100644
--- a/webapp/channels/src/components/post_view/post_time/post_time.tsx
+++ b/webapp/channels/src/components/post_view/post_time/post_time.tsx
@@ -94,8 +94,6 @@ export default class PostTime extends React.PureComponent<Props> {
 
         return (
             <WithTooltip
-                placement='top'
-                id={eventTime.toString()}
                 title={
                     <Timestamp
                         value={eventTime}
diff --git a/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx b/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
index deb442bf26..fbf6e1b39f 100644
--- a/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
+++ b/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
@@ -6,7 +6,7 @@ import {useIntl} from 'react-intl';
 
 import type {Reaction as ReactionType} from '@mattermost/types/reactions';
 
-import WithTooltip from 'components/with_tooltip/with_tooltip_new';
+import WithTooltip from 'components/with_tooltip';
 
 type Props = {
     canAddReactions: boolean;
@@ -124,6 +124,10 @@ const ReactionTooltip: React.FC<Props> = (props: Props) => {
         });
     }
 
+    if (!React.isValidElement(children)) {
+        return null;
+    }
+
     return (
         <WithTooltip
             title={tooltipTitle}
diff --git a/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap b/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap
index d6c70a2495..ebf9f8e543 100644
--- a/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap
@@ -72,8 +72,6 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
         teamId="teamId"
       >
         <WithTooltip
-          id="addReactionTooltip"
-          placement="top"
           title={
             Object {
               "defaultMessage": "Add a reaction",
diff --git a/webapp/channels/src/components/post_view/reaction_list/reaction_list.tsx b/webapp/channels/src/components/post_view/reaction_list/reaction_list.tsx
index 0e3a008331..8e4d3a8cf5 100644
--- a/webapp/channels/src/components/post_view/reaction_list/reaction_list.tsx
+++ b/webapp/channels/src/components/post_view/reaction_list/reaction_list.tsx
@@ -169,9 +169,7 @@ export default class ReactionList extends React.PureComponent<Props, State> {
                         permissions={[Permissions.ADD_REACTION]}
                     >
                         <WithTooltip
-                            id='addReactionTooltip'
                             title={messages.addAReaction}
-                            placement='top'
                         >
                             <button
                                 aria-label={localizeMessage({id: 'reaction.add.ariaLabel', defaultMessage: 'Add a reaction'})}
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_add_to_channel.tsx b/webapp/channels/src/components/profile_popover/profile_popover_add_to_channel.tsx
index 1d8c561d1a..e219c94780 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_add_to_channel.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_add_to_channel.tsx
@@ -53,12 +53,10 @@ const ProfilePopoverAddToChannel = ({
 
     return (
         <WithTooltip
-            id='user_profile.add_user_to_channel.icon'
             title={formatMessage({
                 id: 'user_profile.add_user_to_channel',
                 defaultMessage: 'Add to a Channel',
             })}
-            placement='top'
         >
             {/* This span is necessary as tooltip is not able to pass trigger props to a custom component */}
             <span>
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_call_button_wrapper/index.tsx b/webapp/channels/src/components/profile_popover/profile_popover_call_button_wrapper/index.tsx
index a8b79f768f..dc88c02d5d 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_call_button_wrapper/index.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_call_button_wrapper/index.tsx
@@ -107,9 +107,7 @@ const CallButton = ({
     });
     const callButton = (
         <WithTooltip
-            id='startCallTooltip'
             title={startCallMessage}
-            placement='top'
         >
             <button
                 id='startCallButton'
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx b/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx
index 57cbadb876..04ce1f2709 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx
@@ -82,7 +82,6 @@ const ProfilePopoverCustomStatus = ({
                     emojiStyle={emojiStyles}
                 />
                 <CustomStatusText
-                    tooltipDirection='top'
                     text={customStatus.text || ''}
                 />
             </div>
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx b/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx
index f1ad3a5d00..a3c5d7f9df 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx
@@ -23,7 +23,6 @@ const ProfilePopoverFullName = ({
     if (remoteId) {
         sharedIcon = (
             <SharedUserIndicator
-                id={`sharedUserIndicator-${username}`}
                 className='shared-user-icon'
                 withTooltip={true}
             />
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_self_user_row.tsx b/webapp/channels/src/components/profile_popover/profile_popover_self_user_row.tsx
index 59ad907df4..312ef8b3d4 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_self_user_row.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_self_user_row.tsx
@@ -67,9 +67,7 @@ const ProfilePopoverSelfUserRow = ({
                 />
             </button>
             <WithTooltip
-                id='user_profile.send.dm.yourself'
                 title={formatMessage({id: 'user_profile.send.dm.yourself', defaultMessage: 'Send yourself a message'})}
-                placement='top'
             >
                 <button
                     type='button'
diff --git a/webapp/channels/src/components/quick_input/quick_input.tsx b/webapp/channels/src/components/quick_input/quick_input.tsx
index b30b0d7399..edad41e638 100644
--- a/webapp/channels/src/components/quick_input/quick_input.tsx
+++ b/webapp/channels/src/components/quick_input/quick_input.tsx
@@ -50,11 +50,6 @@ export type Props = {
      */
     clearClassName?: string;
 
-    /**
-     * Position in which the tooltip will be displayed
-     */
-    tooltipPosition?: 'top' | 'bottom';
-
     /**
      * Callback to handle the change event of the input
      */
@@ -165,7 +160,6 @@ export class QuickInput extends React.PureComponent<Props> {
             inputComponent,
             clearable,
             clearClassName,
-            tooltipPosition,
             clearableWithoutValue,
             ...props
         } = this.props;
@@ -204,9 +198,7 @@ export class QuickInput extends React.PureComponent<Props> {
                 role='button'
             >
                 <WithTooltip
-                    id='inputClearTooltip'
                     title={clearableTooltipText}
-                    placement={tooltipPosition}
                 >
                     <span
                         className='input-clear-x'
diff --git a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
index 4c54b9820b..70dec80059 100644
--- a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
@@ -90,8 +90,6 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
           className="input-group input-group--limit"
         >
           <WithTooltip
-            id="renameChannelModalShortUrlTooltip"
-            placement="top"
             title="fake-channel/channels"
           >
             <span
diff --git a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
index b3e80c1606..4501dd94bf 100644
--- a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
+++ b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
@@ -315,8 +315,6 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
 
                             <div className={urlInputClass}>
                                 <WithTooltip
-                                    id='renameChannelModalShortUrlTooltip'
-                                    placement='top'
                                     title={fullUrl}
                                 >
                                     <span className='input-group-addon'>{shortUrl}</span>
diff --git a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
index 3e7e075c69..f05ad1f555 100644
--- a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
+++ b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
@@ -115,9 +115,7 @@ class RhsCardHeader extends React.PureComponent<Props> {
         if (title) {
             back = (
                 <WithTooltip
-                    id='backToResultsTooltip'
                     title={title}
-                    placement='top'
                 >
                     <button
                         className='sidebar--right__back btn btn-icon btn-sm'
@@ -143,9 +141,7 @@ class RhsCardHeader extends React.PureComponent<Props> {
                 </span>
                 <div className='pull-right'>
                     <WithTooltip
-                        id={this.props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
                         title={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
-                        placement='bottom'
                     >
                         <button
                             type='button'
@@ -164,14 +160,12 @@ class RhsCardHeader extends React.PureComponent<Props> {
                         </button>
                     </WithTooltip>
                     <WithTooltip
-                        id='closeSidebarTooltip'
                         title={
                             <FormattedMessage
                                 id='rhs_header.closeSidebarTooltip'
                                 defaultMessage='Close'
                             />
                         }
-                        placement={'top'}
                     >
                         <button
                             type='button'
diff --git a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
index b16fc505bc..ebfb93d5cf 100644
--- a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
+++ b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
@@ -147,8 +147,6 @@ class RhsHeaderPost extends React.PureComponent<Props> {
         if (backToResultsTooltip) {
             back = (
                 <WithTooltip
-                    id='backToResultsTooltip'
-                    placement='top'
                     title={backToResultsTooltip}
                 >
                     <button
@@ -191,8 +189,6 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                     ) : null}
 
                     <WithTooltip
-                        id={this.props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
-                        placement='bottom'
                         title={rhsHeaderTooltipContent}
                     >
                         <button
@@ -213,8 +209,6 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                     </WithTooltip>
 
                     <WithTooltip
-                        id='closeSidebarTooltip'
-                        placement='top'
                         title={closeSidebarTooltip}
                     >
                         <button
diff --git a/webapp/channels/src/components/search/search.tsx b/webapp/channels/src/components/search/search.tsx
index 1d1ef34b6b..57215f198c 100644
--- a/webapp/channels/src/components/search/search.tsx
+++ b/webapp/channels/src/components/search/search.tsx
@@ -22,7 +22,7 @@ import FlagIcon from 'components/widgets/icons/flag_icon';
 import MentionsIcon from 'components/widgets/icons/mentions_icon';
 import SearchIcon from 'components/widgets/icons/search_icon';
 import Popover from 'components/widgets/popover';
-import {ShortcutKeys} from 'components/with_tooltip/shortcut';
+import {ShortcutKeys} from 'components/with_tooltip/tooltip_shortcut';
 
 import Constants, {searchHintOptions, RHSStates, searchFilesHintOptions} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
diff --git a/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index 3eba106bc1..f5706045da 100644
--- a/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
@@ -7,8 +7,6 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
   onToggle={[Function]}
 >
   <WithTooltip
-    id="userGuideHelpTooltip"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Help"
@@ -71,8 +69,6 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
   onToggle={[Function]}
 >
   <WithTooltip
-    id="userGuideHelpTooltip"
-    placement="bottom"
     title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Help"
diff --git a/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx b/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx
index edbbb8d371..e0dff2db12 100644
--- a/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx
+++ b/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx
@@ -99,8 +99,6 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
                 onToggle={this.buttonToggleState}
             >
                 <WithTooltip
-                    id='userGuideHelpTooltip'
-                    placement='bottom'
                     title={this.state.buttonActive ? '' : tooltipText}
                 >
                     <button
diff --git a/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap b/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap
index 47c4921cdd..8ac277e0b4 100644
--- a/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap
+++ b/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap
@@ -9,8 +9,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on all
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -107,8 +105,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on aud
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -208,8 +204,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on cod
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -309,8 +303,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on doc
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -410,8 +402,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on ima
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -511,8 +501,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on pre
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -612,8 +600,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on spr
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
@@ -713,8 +699,6 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on vid
     className=""
   >
     <WithTooltip
-      id="files-filter-tooltip"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Filter"
diff --git a/webapp/channels/src/components/search_results/files_filter_menu.tsx b/webapp/channels/src/components/search_results/files_filter_menu.tsx
index 6515cb1398..1e6c8d9803 100644
--- a/webapp/channels/src/components/search_results/files_filter_menu.tsx
+++ b/webapp/channels/src/components/search_results/files_filter_menu.tsx
@@ -25,13 +25,11 @@ export default function FilesFilterMenu(props: Props): JSX.Element {
         <div className='FilesFilterMenu'>
             <MenuWrapper>
                 <WithTooltip
-                    id='files-filter-tooltip'
                     title={
                         <FormattedMessage
                             id='channel_info_rhs.menu.files.filter'
                             defaultMessage='Filter'
                         />}
-                    placement='top'
                 >
                     <IconContainer
                         id='filesFilterButton'
diff --git a/webapp/channels/src/components/search_results_header/search_results_header.tsx b/webapp/channels/src/components/search_results_header/search_results_header.tsx
index 0869500f57..89bac3eb69 100644
--- a/webapp/channels/src/components/search_results_header/search_results_header.tsx
+++ b/webapp/channels/src/components/search_results_header/search_results_header.tsx
@@ -65,8 +65,6 @@ function SearchResultsHeader(props: Props) {
             <div className='pull-right'>
                 {showExpand && (
                     <WithTooltip
-                        placement='bottom'
-                        id={props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
                         title={sidebarTooltipContent}
                     >
                         <button
@@ -86,8 +84,6 @@ function SearchResultsHeader(props: Props) {
                     </WithTooltip>
                 )}
                 <WithTooltip
-                    placement='top'
-                    id='closeSidebarTooltip'
                     title={
                         <FormattedMessage
                             id='rhs_header.closeSidebarTooltip'
diff --git a/webapp/channels/src/components/seats_calculator/index.tsx b/webapp/channels/src/components/seats_calculator/index.tsx
index 55ba14a29a..3ea5696b26 100644
--- a/webapp/channels/src/components/seats_calculator/index.tsx
+++ b/webapp/channels/src/components/seats_calculator/index.tsx
@@ -190,10 +190,9 @@ export default function SeatsCalculator(props: Props) {
                     <div className='SeatsCalculator__seats-tooltip'>
                         <div className='icon'>
                             <WithTooltip
-                                id='userCount__tooltip'
                                 title={messages.tooltipTitle}
                                 hint={messages.tooltipText}
-                                placement='right'
+                                isVertical={false}
                             >
                                 <InformationOutlineIcon
                                     size={18}
diff --git a/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap b/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap
index 5b24f87308..ce563328f8 100644
--- a/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap
+++ b/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap
@@ -118,8 +118,6 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
   className="signup-team-dir"
 >
   <WithTooltip
-    id="team-description__tooltip"
-    placement="top"
     title="description"
   >
     <TeamInfoIcon
diff --git a/webapp/channels/src/components/select_team/components/select_team_item.tsx b/webapp/channels/src/components/select_team/components/select_team_item.tsx
index f4f795612f..e4ccd101c3 100644
--- a/webapp/channels/src/components/select_team/components/select_team_item.tsx
+++ b/webapp/channels/src/components/select_team/components/select_team_item.tsx
@@ -40,9 +40,7 @@ const SelectTeamItem = ({
 
         return (
             <WithTooltip
-                id='team-description__tooltip'
                 title={team.description}
-                placement='top'
             >
                 <TeamInfoIcon className='icon icon--info'/>
             </WithTooltip>
diff --git a/webapp/channels/src/components/setting_picture.tsx b/webapp/channels/src/components/setting_picture.tsx
index 11ffda88a9..a5c95be6de 100644
--- a/webapp/channels/src/components/setting_picture.tsx
+++ b/webapp/channels/src/components/setting_picture.tsx
@@ -231,9 +231,7 @@ export default class SettingPicture extends Component<Props, State> {
                         {imageElement}
                     </div>
                     <WithTooltip
-                        id='removeIcon'
                         title={title ?? ''}
-                        placement='right'
                         disabled={!title}
                     >
                         <button
diff --git a/webapp/channels/src/components/shared_channel_indicator.tsx b/webapp/channels/src/components/shared_channel_indicator.tsx
index 2cc1ae807d..51710a8146 100644
--- a/webapp/channels/src/components/shared_channel_indicator.tsx
+++ b/webapp/channels/src/components/shared_channel_indicator.tsx
@@ -27,8 +27,6 @@ const SharedChannelIndicator: React.FC<Props> = (props: Props): JSX.Element => {
 
     return (
         <WithTooltip
-            id='sharedTooltip'
-            placement='bottom'
             title={sharedTooltipText}
         >
             {sharedIcon}
diff --git a/webapp/channels/src/components/shared_user_indicator.tsx b/webapp/channels/src/components/shared_user_indicator.tsx
index 214f5647b7..359017db48 100644
--- a/webapp/channels/src/components/shared_user_indicator.tsx
+++ b/webapp/channels/src/components/shared_user_indicator.tsx
@@ -9,7 +9,6 @@ import {useIntl} from 'react-intl';
 import WithTooltip from 'components/with_tooltip';
 
 type Props = {
-    id: string;
 
     /**
      * If not provided, the default title 'From trusted organizations' will be used for the tooltip.
@@ -20,7 +19,6 @@ type Props = {
 
     className?: string;
     withTooltip?: boolean;
-    placement?: string;
 };
 
 const SharedUserIndicator = (props: Props) => {
@@ -40,9 +38,7 @@ const SharedUserIndicator = (props: Props) => {
 
     return (
         <WithTooltip
-            id={props.id}
             title={props.title || intl.formatMessage({id: 'shared_user_indicator.tooltip', defaultMessage: 'From trusted organizations'})}
-            placement={props.placement || 'bottom'}
         >
             {sharedIcon}
         </WithTooltip>
diff --git a/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx b/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
index 4876c81d4b..aa2451a611 100644
--- a/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
+++ b/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
@@ -152,8 +152,6 @@ const AddChannelDropdown = ({
             open={isAddChannelOpen}
         >
             <WithTooltip
-                id='new-group-tooltip'
-                placement='top'
                 title={intl.formatMessage({
                     id: 'sidebar_left.add_channel_dropdown.browseOrCreateChannels',
                     defaultMessage: 'Browse or create channels',
diff --git a/webapp/channels/src/components/sidebar/channel_filter/__snapshots__/channel_filter.test.tsx.snap b/webapp/channels/src/components/sidebar/channel_filter/__snapshots__/channel_filter.test.tsx.snap
index e2bb76718c..1ec2abea20 100644
--- a/webapp/channels/src/components/sidebar/channel_filter/__snapshots__/channel_filter.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/channel_filter/__snapshots__/channel_filter.test.tsx.snap
@@ -5,8 +5,6 @@ exports[`components/sidebar/channel_filter should match snapshot 1`] = `
   className="SidebarFilters"
 >
   <WithTooltip
-    id="channel-filter-tooltip"
-    placement="right"
     shortcut={
       Object {
         "default": Array [
@@ -56,8 +54,6 @@ exports[`components/sidebar/channel_filter should match snapshot if the unread f
   className="SidebarFilters"
 >
   <WithTooltip
-    id="channel-filter-tooltip"
-    placement="right"
     shortcut={
       Object {
         "default": Array [
diff --git a/webapp/channels/src/components/sidebar/channel_filter/channel_filter.tsx b/webapp/channels/src/components/sidebar/channel_filter/channel_filter.tsx
index f7a9f7d5f7..a4a933b97a 100644
--- a/webapp/channels/src/components/sidebar/channel_filter/channel_filter.tsx
+++ b/webapp/channels/src/components/sidebar/channel_filter/channel_filter.tsx
@@ -9,7 +9,7 @@ import type {IntlShape} from 'react-intl';
 import {trackEvent} from 'actions/telemetry_actions';
 
 import WithTooltip from 'components/with_tooltip';
-import {ShortcutKeys} from 'components/with_tooltip/shortcut';
+import {ShortcutKeys} from 'components/with_tooltip/tooltip_shortcut';
 
 import Constants from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
@@ -32,7 +32,6 @@ const shortcut = {
 
 type Props = {
     intl: IntlShape;
-    hasMultipleTeams: boolean;
     unreadFilterEnabled: boolean;
     actions: {
         setUnreadFilterEnabled: (enabled: boolean) => void;
@@ -75,17 +74,15 @@ export class ChannelFilter extends React.PureComponent<Props> {
     };
 
     render() {
-        const {intl, unreadFilterEnabled, hasMultipleTeams} = this.props;
+        const {intl, unreadFilterEnabled} = this.props;
 
         const unreadsAriaLabel = intl.formatMessage({id: 'sidebar_left.channel_filter.filterUnreadAria', defaultMessage: 'unreads filter'});
 
         return (
             <div className='SidebarFilters'>
                 <WithTooltip
-                    id='channel-filter-tooltip'
                     title={unreadFilterEnabled ? messages.disableTooltip : messages.enableTooltip}
                     shortcut={shortcut}
-                    placement={hasMultipleTeams ? 'top' : 'right'}
                 >
                     <a
                         href='#'
diff --git a/webapp/channels/src/components/sidebar/mobile_sidebar_header/contents/contents.tsx b/webapp/channels/src/components/sidebar/mobile_sidebar_header/contents/contents.tsx
index 887a22367a..cf1b9261b6 100644
--- a/webapp/channels/src/components/sidebar/mobile_sidebar_header/contents/contents.tsx
+++ b/webapp/channels/src/components/sidebar/mobile_sidebar_header/contents/contents.tsx
@@ -68,8 +68,6 @@ export default class Contents extends React.PureComponent<Props> {
         if (this.props.teamDescription) {
             teamNameWithToolTip = (
                 <WithTooltip
-                    id='team-name__tooltip'
-                    placement='bottom'
                     title={this.props.teamDescription}
                 >
                     {teamNameWithToolTip}
@@ -100,7 +98,6 @@ export default class Contents extends React.PureComponent<Props> {
                             </div>
                             <CustomStatusEmoji
                                 showTooltip={true}
-                                tooltipDirection='bottom'
                                 emojiStyle={{
                                     verticalAlign: 'top',
                                     marginLeft: 2,
diff --git a/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap b/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap
index cecbbb459e..580da92f8e 100644
--- a/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap
@@ -298,8 +298,6 @@ exports[`components/sidebar/sidebar_category should match snapshot when sorting
       handleOpenDirectMessagesModal={[Function]}
     />
     <WithTooltip
-      id="new-group-tooltip"
-      placement="top"
       title={
         <React.Fragment>
           Create new direct message
@@ -411,8 +409,6 @@ exports[`components/sidebar/sidebar_category should match snapshot when the cate
       handleOpenDirectMessagesModal={[Function]}
     />
     <WithTooltip
-      id="new-group-tooltip"
-      placement="top"
       title={
         <React.Fragment>
           Create new direct message
diff --git a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
index 9442aa8057..1a200f418d 100644
--- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
@@ -276,7 +276,6 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
                         handleOpenDirectMessagesModal={this.handleOpenDirectMessagesModal}
                     />
                     <WithTooltip
-                        id='new-group-tooltip'
                         title={
                             <>
                                 {addHelpLabel}
@@ -287,7 +286,6 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
                                 />
                             </>
                         }
-                        placement='top'
                     >
                         <button
                             className='SidebarChannelGroupHeader_addButton'
diff --git a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
index 86d02aa3fd..888706fa30 100644
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
@@ -181,8 +181,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_channel_link should match sn
     className="SidebarChannelLinkLabel_wrapper"
   >
     <WithTooltip
-      id="channel-displayname__tooltip"
-      placement="top"
       title="channel_label"
     >
       <span
diff --git a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
index 16159f48c7..b343d3b248 100644
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
@@ -201,9 +201,7 @@ export class SidebarChannelLink extends React.PureComponent<Props, State> {
         if (this.state.showTooltip) {
             labelElement = (
                 <WithTooltip
-                    id='channel-displayname__tooltip'
                     title={label}
-                    placement={'top'}
                 >
                     {labelElement}
                 </WithTooltip>
diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.scss b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.scss
new file mode 100644
index 0000000000..0bed0f1c4d
--- /dev/null
+++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.scss
@@ -0,0 +1,26 @@
+.sidebarHeader {
+    display: flex;
+    margin: 0;
+    color: var(--sidebar-text);
+    cursor: pointer;
+    font-family: Metropolis, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+
+    .title {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .icon-chevron-down {
+        margin-right: -1px;
+        margin-left: -3px;
+    }
+
+    #SidebarContainer & {
+        font-family: Metropolis, sans-serif;
+    }
+}
diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
index 0b8cfd7bf8..4660f3efaa 100644
--- a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
@@ -5,7 +5,6 @@ import React, {useCallback, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
 
-import Heading from '@mattermost/compass-components/components/heading'; // eslint-disable-line no-restricted-imports
 import Flex from '@mattermost/compass-components/utilities/layout/Flex'; // eslint-disable-line no-restricted-imports
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
@@ -23,14 +22,14 @@ import {useShowOnboardingTutorialStep} from 'components/tours/onboarding_tour';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import WithTooltip from 'components/with_tooltip';
 
+import './sidebar_header.scss';
+
 import type {GlobalState} from 'types/store';
 
 type SidebarHeaderContainerProps = {
     id?: string;
 }
 
-type SidebarHeaderProps = Record<string, unknown>;
-
 const SidebarHeaderContainer = styled(Flex).attrs(() => ({
     element: 'header',
     row: true,
@@ -54,32 +53,6 @@ const SidebarHeaderContainer = styled(Flex).attrs(() => ({
     }
 `;
 
-const SidebarHeading = styled(Heading).attrs(() => ({
-    element: 'h1',
-    margin: 'none',
-    size: 200,
-}))<SidebarHeaderProps>`
-    color: var(--sidebar-text);
-    cursor: pointer;
-    display: flex;
-
-    .title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: inline-block;
-    }
-
-    .icon-chevron-down {
-        margin-left: -3px;
-        margin-right: -1px;
-    }
-
-    #SidebarContainer & {
-        font-family: Metropolis, sans-serif;
-    }
-`;
-
 export type Props = {
     showNewChannelModal: () => void;
     showMoreChannelsModal: () => void;
@@ -126,16 +99,14 @@ const SidebarHeader = (props: Props) => {
                     className='SidebarHeaderMenuWrapper test-team-header'
                 >
                     <WithTooltip
-                        id='team-name__tooltip'
                         title={currentTeam.description ? currentTeam.description : currentTeam.display_name}
-                        placement='bottom'
                     >
-                        <SidebarHeading>
+                        <h1 className='sidebarHeader'>
                             <button className='style--none sidebar-header'>
                                 <span className='title'>{currentTeam.display_name}</span>
                                 <i className='icon icon-chevron-down'/>
                             </button>
-                        </SidebarHeading>
+                        </h1>
                     </WithTooltip>
                     <MainMenu
                         id='sidebarDropdownMenu'
diff --git a/webapp/channels/src/components/size_aware_image.tsx b/webapp/channels/src/components/size_aware_image.tsx
index 34fdba2e19..1630e9f12d 100644
--- a/webapp/channels/src/components/size_aware_image.tsx
+++ b/webapp/channels/src/components/size_aware_image.tsx
@@ -264,9 +264,7 @@ export class SizeAwareImage extends React.PureComponent<Props, State> {
         );
         const copyLink = (
             <WithTooltip
-                id='single_image_view.copy_link_tooltip.text'
                 title={copyLinkTooltipText}
-                placement='top'
             >
                 <button
                     className={classNames('style--none', 'size-aware-image__copy_link', {
@@ -298,8 +296,6 @@ export class SizeAwareImage extends React.PureComponent<Props, State> {
         );
         const download = (
             <WithTooltip
-                id='single_image_view.download_tooltip.text'
-                placement='top'
                 title={downloadTooltipText}
             >
                 <a
diff --git a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
index 56c517c090..ebe0286e81 100644
--- a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -276,7 +275,6 @@ exports[`components/StatusDropdown should match snapshot with custom status and
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -364,7 +362,6 @@ exports[`components/StatusDropdown should match snapshot with custom status and
           <CustomStatusText
             className="custom_status__text"
             text="In a meeting"
-            tooltipDirection="bottom"
           />
           <Text
             margin="none"
@@ -375,8 +372,6 @@ exports[`components/StatusDropdown should match snapshot with custom status and
             onTouchEnd={[Function]}
           >
             <WithTooltip
-              id="InputClearTooltip"
-              placement="left"
               title={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Clear"
@@ -600,7 +595,6 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -679,7 +673,6 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           <CustomStatusText
             className="custom_status__text"
             text=""
-            tooltipDirection="bottom"
           />
           <Text
             margin="none"
@@ -887,7 +880,6 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -966,7 +958,6 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           <CustomStatusText
             className="custom_status__text"
             text=""
-            tooltipDirection="bottom"
           />
           <Text
             margin="none"
@@ -1174,7 +1165,6 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -1253,7 +1243,6 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           <CustomStatusText
             className="custom_status__text"
             text=""
-            tooltipDirection="bottom"
           />
           <Text
             margin="none"
@@ -1462,7 +1451,6 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <Memo(Avatar)
       size="sm"
@@ -1725,7 +1713,6 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -1980,7 +1967,6 @@ exports[`components/StatusDropdown should not show clear status button when cust
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -2059,7 +2045,6 @@ exports[`components/StatusDropdown should not show clear status button when cust
           <CustomStatusText
             className="custom_status__text"
             text=""
-            tooltipDirection="bottom"
           />
           <Text
             margin="none"
@@ -2267,7 +2252,6 @@ exports[`components/StatusDropdown should show clear status button when custom s
       }
       onClick={[Function]}
       showTooltip={true}
-      tooltipDirection="bottom"
     />
     <div
       className="status"
@@ -2355,7 +2339,6 @@ exports[`components/StatusDropdown should show clear status button when custom s
           <CustomStatusText
             className="custom_status__text"
             text="In a meeting"
-            tooltipDirection="bottom"
           />
           <Text
             margin="none"
@@ -2366,8 +2349,6 @@ exports[`components/StatusDropdown should show clear status button when custom s
             onTouchEnd={[Function]}
           >
             <WithTooltip
-              id="InputClearTooltip"
-              placement="left"
               title={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Clear"
diff --git a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx
index 529e406824..7543f54402 100644
--- a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx
+++ b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx
@@ -321,8 +321,6 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                 onTouchEnd={this.handleClearStatus}
             >
                 <WithTooltip
-                    id='InputClearTooltip'
-                    placement='left'
                     title={clearableTooltipText}
                 >
                     <span
@@ -545,7 +543,6 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                 >
                     <CustomStatusEmoji
                         showTooltip={true}
-                        tooltipDirection={'bottom'}
                         emojiStyle={{marginRight: '6px'}}
                         onClick={this.handleCustomStatusEmojiClick as () => void}
                     />
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap b/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
index 48759caf91..a11b1a15d1 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
+++ b/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
         <span
           className="profile-icon"
         >
-          <Memo(Avatar)
+          <Avatar
             size="sm"
             url="/api/v4/users/userid2/image?_=0"
             username="user2"
@@ -60,7 +60,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
               onError={[Function]}
               src="/api/v4/users/userid2/image?_=0"
             />
-          </Memo(Avatar)>
+          </Avatar>
         </span>
         <Memo(StatusIcon) />
       </span>
@@ -143,7 +143,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
         <span
           className="profile-icon"
         >
-          <Memo(Avatar)
+          <Avatar
             size="sm"
             url="/api/v4/users/userid1/image?_=0"
             username="user"
@@ -155,7 +155,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
               onError={[Function]}
               src="/api/v4/users/userid1/image?_=0"
             />
-          </Memo(Avatar)>
+          </Avatar>
         </span>
         <Memo(StatusIcon) />
       </span>
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
index 12d1b1fc26..ffde62fe14 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
+++ b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
@@ -149,7 +149,6 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
 
     const sharedIcon = item.remote_id ? (
         <SharedUserIndicator
-            id={`sharedUserIndicator-${item.id}`}
             className='shared-user-icon'
         />
     ) : null;
diff --git a/webapp/channels/src/components/suggestion/search_user_provider.tsx b/webapp/channels/src/components/suggestion/search_user_provider.tsx
index 9d3139a7ea..a354f47eb4 100644
--- a/webapp/channels/src/components/suggestion/search_user_provider.tsx
+++ b/webapp/channels/src/components/suggestion/search_user_provider.tsx
@@ -35,7 +35,6 @@ export const SearchUserSuggestion = React.forwardRef<HTMLDivElement, SuggestionP
     if (item.remote_id) {
         sharedIcon = (
             <SharedUserIndicator
-                id={`sharedUserIndicator-${item.id}`}
                 className='mention__shared-user-icon'
             />
         );
diff --git a/webapp/channels/src/components/team_sidebar/components/team_button.tsx b/webapp/channels/src/components/team_sidebar/components/team_button.tsx
index 0572d8fdbe..5cc4468c63 100644
--- a/webapp/channels/src/components/team_sidebar/components/team_button.tsx
+++ b/webapp/channels/src/components/team_sidebar/components/team_button.tsx
@@ -10,8 +10,8 @@ import {Link} from 'react-router-dom';
 import {mark, trackEvent} from 'actions/telemetry_actions.jsx';
 
 import TeamIcon from 'components/widgets/team_icon/team_icon';
-import {ShortcutKeys} from 'components/with_tooltip/shortcut';
-import WithTooltip from 'components/with_tooltip/with_tooltip_new';
+import WithTooltip from 'components/with_tooltip';
+import {ShortcutKeys} from 'components/with_tooltip/tooltip_shortcut';
 
 import {Mark} from 'utils/performance_telemetry';
 
@@ -225,6 +225,10 @@ function WithTeamTooltip({
         };
     }, [order]);
 
+    if (!React.isValidElement(children)) {
+        return null;
+    }
+
     return (
         <WithTooltip
             title={tip || intl.formatMessage(messages.nameUndefined)}
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
index 53ffced045..fb52483df6 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
@@ -90,113 +90,46 @@ exports[`components/threading/channel_threads/thread_footer should report total
               onPointerDown={[Function]}
             >
               <WithTooltip
-                id="tooltip-name-5"
-                placement="top"
                 title="first.last5"
               >
-                <OverlayTrigger
-                  defaultOverlayShown={false}
-                  delay={400}
-                  disabled={false}
-                  overlay={<Unknown />}
-                  placement="top"
-                  trigger={
-                    Array [
-                      "hover",
-                      "focus",
-                    ]
+                <Avatar
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseMove={[Function]}
+                  onPointerDown={[Function]}
+                  onPointerEnter={[Function]}
+                  size="sm"
+                  style={
+                    Object {
+                      "background": "rgb(240, 240, 241)",
+                    }
                   }
+                  tabIndex={-1}
+                  url="/api/v4/users/5/image?_=0"
                 >
-                  <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",
-                      ]
-                    }
-                  >
-                    <Memo(Avatar)
-                      onBlur={[Function]}
-                      onClick={null}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      size="sm"
-                      style={
-                        Object {
-                          "background": "rgb(240, 240, 241)",
-                        }
+                  <img
+                    alt="user profile image"
+                    className="Avatar Avatar-sm"
+                    loading="lazy"
+                    onBlur={[Function]}
+                    onError={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseMove={[Function]}
+                    onPointerDown={[Function]}
+                    onPointerEnter={[Function]}
+                    src="/api/v4/users/5/image?_=0"
+                    style={
+                      Object {
+                        "background": "rgb(240, 240, 241)",
                       }
-                      tabIndex={-1}
-                      url="/api/v4/users/5/image?_=0"
-                    >
-                      <img
-                        alt="user profile image"
-                        className="Avatar Avatar-sm"
-                        loading="lazy"
-                        onBlur={[Function]}
-                        onClick={null}
-                        onError={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        src="/api/v4/users/5/image?_=0"
-                        style={
-                          Object {
-                            "background": "rgb(240, 240, 241)",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                  </OverlayTrigger>
-                </OverlayTrigger>
+                    }
+                    tabIndex={-1}
+                  />
+                </Avatar>
               </WithTooltip>
             </button>
           </ProfilePopoverController>
@@ -228,113 +161,46 @@ exports[`components/threading/channel_threads/thread_footer should report total
               onPointerDown={[Function]}
             >
               <WithTooltip
-                id="tooltip-name-4"
-                placement="top"
                 title="first.last4"
               >
-                <OverlayTrigger
-                  defaultOverlayShown={false}
-                  delay={400}
-                  disabled={false}
-                  overlay={<Unknown />}
-                  placement="top"
-                  trigger={
-                    Array [
-                      "hover",
-                      "focus",
-                    ]
+                <Avatar
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseMove={[Function]}
+                  onPointerDown={[Function]}
+                  onPointerEnter={[Function]}
+                  size="sm"
+                  style={
+                    Object {
+                      "background": "rgb(240, 240, 241)",
+                    }
                   }
+                  tabIndex={-1}
+                  url="/api/v4/users/4/image?_=0"
                 >
-                  <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",
-                      ]
-                    }
-                  >
-                    <Memo(Avatar)
-                      onBlur={[Function]}
-                      onClick={null}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      size="sm"
-                      style={
-                        Object {
-                          "background": "rgb(240, 240, 241)",
-                        }
+                  <img
+                    alt="user profile image"
+                    className="Avatar Avatar-sm"
+                    loading="lazy"
+                    onBlur={[Function]}
+                    onError={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseMove={[Function]}
+                    onPointerDown={[Function]}
+                    onPointerEnter={[Function]}
+                    src="/api/v4/users/4/image?_=0"
+                    style={
+                      Object {
+                        "background": "rgb(240, 240, 241)",
                       }
-                      tabIndex={-1}
-                      url="/api/v4/users/4/image?_=0"
-                    >
-                      <img
-                        alt="user profile image"
-                        className="Avatar Avatar-sm"
-                        loading="lazy"
-                        onBlur={[Function]}
-                        onClick={null}
-                        onError={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        src="/api/v4/users/4/image?_=0"
-                        style={
-                          Object {
-                            "background": "rgb(240, 240, 241)",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                  </OverlayTrigger>
-                </OverlayTrigger>
+                    }
+                    tabIndex={-1}
+                  />
+                </Avatar>
               </WithTooltip>
             </button>
           </ProfilePopoverController>
@@ -366,222 +232,88 @@ exports[`components/threading/channel_threads/thread_footer should report total
               onPointerDown={[Function]}
             >
               <WithTooltip
-                id="tooltip-name-3"
-                placement="top"
                 title="first.last3"
               >
-                <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",
-                      ]
-                    }
-                  >
-                    <Memo(Avatar)
-                      onBlur={[Function]}
-                      onClick={null}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      size="sm"
-                      style={
-                        Object {
-                          "background": "rgb(240, 240, 241)",
-                        }
-                      }
-                      tabIndex={-1}
-                      url="/api/v4/users/3/image?_=0"
-                    >
-                      <img
-                        alt="user profile image"
-                        className="Avatar Avatar-sm"
-                        loading="lazy"
-                        onBlur={[Function]}
-                        onClick={null}
-                        onError={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        src="/api/v4/users/3/image?_=0"
-                        style={
-                          Object {
-                            "background": "rgb(240, 240, 241)",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                  </OverlayTrigger>
-                </OverlayTrigger>
-              </WithTooltip>
-            </button>
-          </ProfilePopoverController>
-        </UserAvatar>
-        <WithTooltip
-          id="names-overflow"
-          placement="top"
-          title="first.last2, first.last1"
-        >
-          <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",
-                ]
-              }
-            >
-              <Memo(Avatar)
-                onBlur={[Function]}
-                onClick={null}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                size="sm"
-                style={
-                  Object {
-                    "background": "rgb(240, 240, 241)",
-                  }
-                }
-                tabIndex={0}
-                text="+2"
-              >
-                <div
-                  className="Avatar Avatar-sm Avatar-plain"
-                  data-content="+2"
+                <Avatar
                   onBlur={[Function]}
-                  onClick={null}
                   onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseMove={[Function]}
+                  onPointerDown={[Function]}
+                  onPointerEnter={[Function]}
+                  size="sm"
                   style={
                     Object {
                       "background": "rgb(240, 240, 241)",
                     }
                   }
-                  tabIndex={0}
-                />
-              </Memo(Avatar)>
-            </OverlayTrigger>
-          </OverlayTrigger>
+                  tabIndex={-1}
+                  url="/api/v4/users/3/image?_=0"
+                >
+                  <img
+                    alt="user profile image"
+                    className="Avatar Avatar-sm"
+                    loading="lazy"
+                    onBlur={[Function]}
+                    onError={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseMove={[Function]}
+                    onPointerDown={[Function]}
+                    onPointerEnter={[Function]}
+                    src="/api/v4/users/3/image?_=0"
+                    style={
+                      Object {
+                        "background": "rgb(240, 240, 241)",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                </Avatar>
+              </WithTooltip>
+            </button>
+          </ProfilePopoverController>
+        </UserAvatar>
+        <WithTooltip
+          title="first.last2, first.last1"
+        >
+          <Avatar
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onPointerDown={[Function]}
+            onPointerEnter={[Function]}
+            size="sm"
+            style={
+              Object {
+                "background": "rgb(240, 240, 241)",
+              }
+            }
+            tabIndex={0}
+            text="+2"
+          >
+            <div
+              className="Avatar Avatar-sm Avatar-plain"
+              data-content="+2"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
+              }
+              tabIndex={0}
+            />
+          </Avatar>
         </WithTooltip>
       </div>
     </Memo(Avatars)>
@@ -799,8 +531,6 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
     className="ThreadFooter"
   >
     <WithTooltip
-      id="threadFooterIndicator"
-      placement="top"
       title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="{newReplies, plural, =0 {no unread messages} =1 {one unread message} other {# unread messages}}"
@@ -813,88 +543,21 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
         />
       }
     >
-      <OverlayTrigger
-        defaultOverlayShown={false}
-        delay={400}
-        disabled={false}
-        overlay={<Unknown />}
-        placement="top"
-        trigger={
-          Array [
-            "hover",
-            "focus",
-          ]
-        }
+      <div
+        className="indicator"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseMove={[Function]}
+        onPointerDown={[Function]}
+        onPointerEnter={[Function]}
+        tabIndex={0}
       >
-        <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",
-            ]
-          }
-        >
-          <div
-            className="indicator"
-            onBlur={[Function]}
-            onClick={null}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            tabIndex={0}
-          >
-            <div
-              className="dot-unreads"
-            />
-          </div>
-        </OverlayTrigger>
-      </OverlayTrigger>
+        <div
+          className="dot-unreads"
+        />
+      </div>
     </WithTooltip>
     <Memo(Avatars)
       size="sm"
@@ -938,113 +601,46 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
               onPointerDown={[Function]}
             >
               <WithTooltip
-                id="tooltip-name-5"
-                placement="top"
                 title="first.last5"
               >
-                <OverlayTrigger
-                  defaultOverlayShown={false}
-                  delay={400}
-                  disabled={false}
-                  overlay={<Unknown />}
-                  placement="top"
-                  trigger={
-                    Array [
-                      "hover",
-                      "focus",
-                    ]
+                <Avatar
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseMove={[Function]}
+                  onPointerDown={[Function]}
+                  onPointerEnter={[Function]}
+                  size="sm"
+                  style={
+                    Object {
+                      "background": "rgb(240, 240, 241)",
+                    }
                   }
+                  tabIndex={-1}
+                  url="/api/v4/users/5/image?_=0"
                 >
-                  <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",
-                      ]
-                    }
-                  >
-                    <Memo(Avatar)
-                      onBlur={[Function]}
-                      onClick={null}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      size="sm"
-                      style={
-                        Object {
-                          "background": "rgb(240, 240, 241)",
-                        }
+                  <img
+                    alt="user profile image"
+                    className="Avatar Avatar-sm"
+                    loading="lazy"
+                    onBlur={[Function]}
+                    onError={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseMove={[Function]}
+                    onPointerDown={[Function]}
+                    onPointerEnter={[Function]}
+                    src="/api/v4/users/5/image?_=0"
+                    style={
+                      Object {
+                        "background": "rgb(240, 240, 241)",
                       }
-                      tabIndex={-1}
-                      url="/api/v4/users/5/image?_=0"
-                    >
-                      <img
-                        alt="user profile image"
-                        className="Avatar Avatar-sm"
-                        loading="lazy"
-                        onBlur={[Function]}
-                        onClick={null}
-                        onError={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        src="/api/v4/users/5/image?_=0"
-                        style={
-                          Object {
-                            "background": "rgb(240, 240, 241)",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                  </OverlayTrigger>
-                </OverlayTrigger>
+                    }
+                    tabIndex={-1}
+                  />
+                </Avatar>
               </WithTooltip>
             </button>
           </ProfilePopoverController>
@@ -1076,113 +672,46 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
               onPointerDown={[Function]}
             >
               <WithTooltip
-                id="tooltip-name-4"
-                placement="top"
                 title="first.last4"
               >
-                <OverlayTrigger
-                  defaultOverlayShown={false}
-                  delay={400}
-                  disabled={false}
-                  overlay={<Unknown />}
-                  placement="top"
-                  trigger={
-                    Array [
-                      "hover",
-                      "focus",
-                    ]
+                <Avatar
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseMove={[Function]}
+                  onPointerDown={[Function]}
+                  onPointerEnter={[Function]}
+                  size="sm"
+                  style={
+                    Object {
+                      "background": "rgb(240, 240, 241)",
+                    }
                   }
+                  tabIndex={-1}
+                  url="/api/v4/users/4/image?_=0"
                 >
-                  <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",
-                      ]
-                    }
-                  >
-                    <Memo(Avatar)
-                      onBlur={[Function]}
-                      onClick={null}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      size="sm"
-                      style={
-                        Object {
-                          "background": "rgb(240, 240, 241)",
-                        }
+                  <img
+                    alt="user profile image"
+                    className="Avatar Avatar-sm"
+                    loading="lazy"
+                    onBlur={[Function]}
+                    onError={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseMove={[Function]}
+                    onPointerDown={[Function]}
+                    onPointerEnter={[Function]}
+                    src="/api/v4/users/4/image?_=0"
+                    style={
+                      Object {
+                        "background": "rgb(240, 240, 241)",
                       }
-                      tabIndex={-1}
-                      url="/api/v4/users/4/image?_=0"
-                    >
-                      <img
-                        alt="user profile image"
-                        className="Avatar Avatar-sm"
-                        loading="lazy"
-                        onBlur={[Function]}
-                        onClick={null}
-                        onError={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        src="/api/v4/users/4/image?_=0"
-                        style={
-                          Object {
-                            "background": "rgb(240, 240, 241)",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                  </OverlayTrigger>
-                </OverlayTrigger>
+                    }
+                    tabIndex={-1}
+                  />
+                </Avatar>
               </WithTooltip>
             </button>
           </ProfilePopoverController>
@@ -1214,222 +743,88 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
               onPointerDown={[Function]}
             >
               <WithTooltip
-                id="tooltip-name-3"
-                placement="top"
                 title="first.last3"
               >
-                <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",
-                      ]
-                    }
-                  >
-                    <Memo(Avatar)
-                      onBlur={[Function]}
-                      onClick={null}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      size="sm"
-                      style={
-                        Object {
-                          "background": "rgb(240, 240, 241)",
-                        }
-                      }
-                      tabIndex={-1}
-                      url="/api/v4/users/3/image?_=0"
-                    >
-                      <img
-                        alt="user profile image"
-                        className="Avatar Avatar-sm"
-                        loading="lazy"
-                        onBlur={[Function]}
-                        onClick={null}
-                        onError={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        src="/api/v4/users/3/image?_=0"
-                        style={
-                          Object {
-                            "background": "rgb(240, 240, 241)",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                  </OverlayTrigger>
-                </OverlayTrigger>
-              </WithTooltip>
-            </button>
-          </ProfilePopoverController>
-        </UserAvatar>
-        <WithTooltip
-          id="names-overflow"
-          placement="top"
-          title="first.last2, first.last1"
-        >
-          <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",
-                ]
-              }
-            >
-              <Memo(Avatar)
-                onBlur={[Function]}
-                onClick={null}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                size="sm"
-                style={
-                  Object {
-                    "background": "rgb(240, 240, 241)",
-                  }
-                }
-                tabIndex={0}
-                text="+2"
-              >
-                <div
-                  className="Avatar Avatar-sm Avatar-plain"
-                  data-content="+2"
+                <Avatar
                   onBlur={[Function]}
-                  onClick={null}
                   onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseMove={[Function]}
+                  onPointerDown={[Function]}
+                  onPointerEnter={[Function]}
+                  size="sm"
                   style={
                     Object {
                       "background": "rgb(240, 240, 241)",
                     }
                   }
-                  tabIndex={0}
-                />
-              </Memo(Avatar)>
-            </OverlayTrigger>
-          </OverlayTrigger>
+                  tabIndex={-1}
+                  url="/api/v4/users/3/image?_=0"
+                >
+                  <img
+                    alt="user profile image"
+                    className="Avatar Avatar-sm"
+                    loading="lazy"
+                    onBlur={[Function]}
+                    onError={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseMove={[Function]}
+                    onPointerDown={[Function]}
+                    onPointerEnter={[Function]}
+                    src="/api/v4/users/3/image?_=0"
+                    style={
+                      Object {
+                        "background": "rgb(240, 240, 241)",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                </Avatar>
+              </WithTooltip>
+            </button>
+          </ProfilePopoverController>
+        </UserAvatar>
+        <WithTooltip
+          title="first.last2, first.last1"
+        >
+          <Avatar
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onPointerDown={[Function]}
+            onPointerEnter={[Function]}
+            size="sm"
+            style={
+              Object {
+                "background": "rgb(240, 240, 241)",
+              }
+            }
+            tabIndex={0}
+            text="+2"
+          >
+            <div
+              className="Avatar Avatar-sm Avatar-plain"
+              data-content="+2"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
+              }
+              tabIndex={0}
+            />
+          </Avatar>
         </WithTooltip>
       </div>
     </Memo(Avatars)>
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx b/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx
index 3aa0f8a35c..32ba2a3064 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx
@@ -85,8 +85,6 @@ function ThreadFooter({
                 <div className='indicator'/>
             ) : (
                 <WithTooltip
-                    id='threadFooterIndicator'
-                    placement='top'
                     title={
                         <FormattedMessage
                             id='threading.numNewMessages'
diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap
index 9a00a05163..9852792c6c 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap
+++ b/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap
@@ -46,8 +46,6 @@ exports[`components/threading/global_threads/thread_item should report total num
       unreadTimestamp={1611786714912}
     >
       <WithTooltip
-        id="threadActionMenu"
-        placement="top"
         title={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Actions"
@@ -171,8 +169,6 @@ exports[`components/threading/global_threads/thread_item should report unread me
       unreadTimestamp={1611786714912}
     >
       <WithTooltip
-        id="threadActionMenu"
-        placement="top"
         title={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Actions"
@@ -294,8 +290,6 @@ exports[`components/threading/global_threads/thread_item should report unread me
       unreadTimestamp={1611786714912}
     >
       <WithTooltip
-        id="threadActionMenu"
-        placement="top"
         title={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Actions"
diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx
index ba32a58d20..e3689061b3 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx
+++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx
@@ -227,8 +227,6 @@ function ThreadItem({
                     unreadTimestamp={unreadTimestamp}
                 >
                     <WithTooltip
-                        id='threadActionMenu'
-                        placement='top'
                         title={(
                             <FormattedMessage
                                 id='threading.threadItem.menu'
diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap
index 7c895bfacb..aa8bb93fbd 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap
+++ b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap
@@ -47,8 +47,6 @@ exports[`components/threading/global_threads/thread_list should match snapshot 1
         className="right-anchor"
       >
         <WithTooltip
-          id="threadListMarkRead"
-          placement="top"
           title="Mark all as read"
         >
           <Memo(Button)
diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx
index 2953bb9409..34264b8427 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx
+++ b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx
@@ -232,12 +232,10 @@ const ThreadList = ({
                 right={(
                     <div className='right-anchor'>
                         <WithTooltip
-                            id='threadListMarkRead'
                             title={formatMessage({
                                 id: 'threading.threadList.markRead',
                                 defaultMessage: 'Mark all as read',
                             })}
-                            placement={'top'}
                         >
                             <Button
                                 id={'threads-list__mark-all-as-read'}
diff --git a/webapp/channels/src/components/threading/global_threads/thread_pane/__snapshots__/thread_pane.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_pane/__snapshots__/thread_pane.test.tsx.snap
index e0a0976e6d..67e7dc1cad 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_pane/__snapshots__/thread_pane.test.tsx.snap
+++ b/webapp/channels/src/components/threading/global_threads/thread_pane/__snapshots__/thread_pane.test.tsx.snap
@@ -47,8 +47,6 @@ exports[`components/threading/global_threads/thread_pane should match snapshot 1
           unreadTimestamp={1611786714912}
         >
           <WithTooltip
-            id="threadActionMenu"
-            placement="top"
             title="More Actions"
           >
             <Memo(Button)
diff --git a/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.tsx b/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.tsx
index a6f62f4c88..1c91a07421 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.tsx
+++ b/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.tsx
@@ -120,12 +120,10 @@ const ThreadPane = ({
                             unreadTimestamp={unreadTimestamp}
                         >
                             <WithTooltip
-                                id='threadActionMenu'
                                 title={formatMessage({
                                     id: 'threading.threadHeader.menu',
                                     defaultMessage: 'More Actions',
                                 })}
-                                placement={'top'}
                             >
                                 <Button className='Button___icon Button___large'>
                                     <DotsVerticalIcon size={18}/>
diff --git a/webapp/channels/src/components/toast/toast.tsx b/webapp/channels/src/components/toast/toast.tsx
index efe4f64476..4ba8e3d49c 100644
--- a/webapp/channels/src/components/toast/toast.tsx
+++ b/webapp/channels/src/components/toast/toast.tsx
@@ -24,7 +24,6 @@ export type Props = {
     showActions?: boolean; //used for showing jump actions
     width: number;
     extraClasses?: string;
-    overlayPlacement?: string;
     jumpDirection?: 'up' | 'down';
 };
 
@@ -37,7 +36,6 @@ export default function Toast({
     showActions,
     width,
     extraClasses = '',
-    overlayPlacement = 'bottom',
     jumpDirection = 'down',
 }: Props) {
     function handleDismiss() {
@@ -70,8 +68,6 @@ export default function Toast({
                 {children}
             </div>
             <WithTooltip
-                id='toast-close__tooltip'
-                placement={overlayPlacement}
                 title={
                     <>
                         <FormattedMessage
diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
index 9d89acd055..a014ebaf86 100644
--- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
@@ -1021,7 +1021,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                             <span
                                               className="status-wrapper"
                                             >
-                                              <Memo(Avatar)
+                                              <Avatar
                                                 className="avatar-post-preview"
                                                 size="sm"
                                                 tabIndex={-1}
@@ -1036,7 +1036,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   src="/api/v4/users/id0/image?_=0"
                                                   tabIndex={-1}
                                                 />
-                                              </Memo(Avatar)>
+                                              </Avatar>
                                               <Memo(StatusIcon)
                                                 status="offline"
                                               >
@@ -1097,102 +1097,37 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
                                         <WithTooltip
-                                          id="name-id0"
-                                          placement="top"
                                           title="Send message"
                                         >
-                                          <OverlayTrigger
-                                            defaultOverlayShown={false}
-                                            delay={400}
-                                            disabled={false}
-                                            overlay={<Unknown />}
-                                            placement="top"
-                                            trigger={
-                                              Array [
-                                                "hover",
-                                                "focus",
-                                              ]
-                                            }
+                                          <DMButton
+                                            aria-label="Send message to username0"
+                                            className="btn btn-icon btn-xs"
+                                            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",
-                                                ]
-                                              }
+                                            <button
+                                              aria-label="Send message to username0"
+                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseMove={[Function]}
+                                              onPointerDown={[Function]}
+                                              onPointerEnter={[Function]}
                                             >
-                                              <DMButton
-                                                aria-label="Send message to username0"
-                                                className="btn btn-icon btn-xs"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Send message to username0"
-                                                  className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                >
-                                                  <i
-                                                    className="icon icon-send"
-                                                  />
-                                                </button>
-                                              </DMButton>
-                                            </OverlayTrigger>
-                                          </OverlayTrigger>
+                                              <i
+                                                className="icon icon-send"
+                                              />
+                                            </button>
+                                          </DMButton>
                                         </WithTooltip>
                                       </div>
                                     </DMContainer>
@@ -1265,7 +1200,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                             <span
                                               className="status-wrapper"
                                             >
-                                              <Memo(Avatar)
+                                              <Avatar
                                                 className="avatar-post-preview"
                                                 size="sm"
                                                 tabIndex={-1}
@@ -1280,7 +1215,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   src="/api/v4/users/id1/image?_=0"
                                                   tabIndex={-1}
                                                 />
-                                              </Memo(Avatar)>
+                                              </Avatar>
                                               <Memo(StatusIcon)
                                                 status="offline"
                                               >
@@ -1341,102 +1276,37 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
                                         <WithTooltip
-                                          id="name-id1"
-                                          placement="top"
                                           title="Send message"
                                         >
-                                          <OverlayTrigger
-                                            defaultOverlayShown={false}
-                                            delay={400}
-                                            disabled={false}
-                                            overlay={<Unknown />}
-                                            placement="top"
-                                            trigger={
-                                              Array [
-                                                "hover",
-                                                "focus",
-                                              ]
-                                            }
+                                          <DMButton
+                                            aria-label="Send message to username1"
+                                            className="btn btn-icon btn-xs"
+                                            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",
-                                                ]
-                                              }
+                                            <button
+                                              aria-label="Send message to username1"
+                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseMove={[Function]}
+                                              onPointerDown={[Function]}
+                                              onPointerEnter={[Function]}
                                             >
-                                              <DMButton
-                                                aria-label="Send message to username1"
-                                                className="btn btn-icon btn-xs"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Send message to username1"
-                                                  className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                >
-                                                  <i
-                                                    className="icon icon-send"
-                                                  />
-                                                </button>
-                                              </DMButton>
-                                            </OverlayTrigger>
-                                          </OverlayTrigger>
+                                              <i
+                                                className="icon icon-send"
+                                              />
+                                            </button>
+                                          </DMButton>
                                         </WithTooltip>
                                       </div>
                                     </DMContainer>
@@ -1509,7 +1379,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                             <span
                                               className="status-wrapper"
                                             >
-                                              <Memo(Avatar)
+                                              <Avatar
                                                 className="avatar-post-preview"
                                                 size="sm"
                                                 tabIndex={-1}
@@ -1524,7 +1394,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   src="/api/v4/users/id10/image?_=0"
                                                   tabIndex={-1}
                                                 />
-                                              </Memo(Avatar)>
+                                              </Avatar>
                                               <Memo(StatusIcon)
                                                 status="offline"
                                               >
@@ -1585,102 +1455,37 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
                                         <WithTooltip
-                                          id="name-id10"
-                                          placement="top"
                                           title="Send message"
                                         >
-                                          <OverlayTrigger
-                                            defaultOverlayShown={false}
-                                            delay={400}
-                                            disabled={false}
-                                            overlay={<Unknown />}
-                                            placement="top"
-                                            trigger={
-                                              Array [
-                                                "hover",
-                                                "focus",
-                                              ]
-                                            }
+                                          <DMButton
+                                            aria-label="Send message to username10"
+                                            className="btn btn-icon btn-xs"
+                                            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",
-                                                ]
-                                              }
+                                            <button
+                                              aria-label="Send message to username10"
+                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseMove={[Function]}
+                                              onPointerDown={[Function]}
+                                              onPointerEnter={[Function]}
                                             >
-                                              <DMButton
-                                                aria-label="Send message to username10"
-                                                className="btn btn-icon btn-xs"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Send message to username10"
-                                                  className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                >
-                                                  <i
-                                                    className="icon icon-send"
-                                                  />
-                                                </button>
-                                              </DMButton>
-                                            </OverlayTrigger>
-                                          </OverlayTrigger>
+                                              <i
+                                                className="icon icon-send"
+                                              />
+                                            </button>
+                                          </DMButton>
                                         </WithTooltip>
                                       </div>
                                     </DMContainer>
@@ -1753,7 +1558,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                             <span
                                               className="status-wrapper"
                                             >
-                                              <Memo(Avatar)
+                                              <Avatar
                                                 className="avatar-post-preview"
                                                 size="sm"
                                                 tabIndex={-1}
@@ -1768,7 +1573,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   src="/api/v4/users/id11/image?_=0"
                                                   tabIndex={-1}
                                                 />
-                                              </Memo(Avatar)>
+                                              </Avatar>
                                               <Memo(StatusIcon)
                                                 status="offline"
                                               >
@@ -1829,102 +1634,37 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
                                         <WithTooltip
-                                          id="name-id11"
-                                          placement="top"
                                           title="Send message"
                                         >
-                                          <OverlayTrigger
-                                            defaultOverlayShown={false}
-                                            delay={400}
-                                            disabled={false}
-                                            overlay={<Unknown />}
-                                            placement="top"
-                                            trigger={
-                                              Array [
-                                                "hover",
-                                                "focus",
-                                              ]
-                                            }
+                                          <DMButton
+                                            aria-label="Send message to username11"
+                                            className="btn btn-icon btn-xs"
+                                            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",
-                                                ]
-                                              }
+                                            <button
+                                              aria-label="Send message to username11"
+                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseMove={[Function]}
+                                              onPointerDown={[Function]}
+                                              onPointerEnter={[Function]}
                                             >
-                                              <DMButton
-                                                aria-label="Send message to username11"
-                                                className="btn btn-icon btn-xs"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Send message to username11"
-                                                  className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                >
-                                                  <i
-                                                    className="icon icon-send"
-                                                  />
-                                                </button>
-                                              </DMButton>
-                                            </OverlayTrigger>
-                                          </OverlayTrigger>
+                                              <i
+                                                className="icon icon-send"
+                                              />
+                                            </button>
+                                          </DMButton>
                                         </WithTooltip>
                                       </div>
                                     </DMContainer>
@@ -1997,7 +1737,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                             <span
                                               className="status-wrapper"
                                             >
-                                              <Memo(Avatar)
+                                              <Avatar
                                                 className="avatar-post-preview"
                                                 size="sm"
                                                 tabIndex={-1}
@@ -2012,7 +1752,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   src="/api/v4/users/id12/image?_=0"
                                                   tabIndex={-1}
                                                 />
-                                              </Memo(Avatar)>
+                                              </Avatar>
                                               <Memo(StatusIcon)
                                                 status="offline"
                                               >
@@ -2073,102 +1813,37 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
                                         <WithTooltip
-                                          id="name-id12"
-                                          placement="top"
                                           title="Send message"
                                         >
-                                          <OverlayTrigger
-                                            defaultOverlayShown={false}
-                                            delay={400}
-                                            disabled={false}
-                                            overlay={<Unknown />}
-                                            placement="top"
-                                            trigger={
-                                              Array [
-                                                "hover",
-                                                "focus",
-                                              ]
-                                            }
+                                          <DMButton
+                                            aria-label="Send message to username12"
+                                            className="btn btn-icon btn-xs"
+                                            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",
-                                                ]
-                                              }
+                                            <button
+                                              aria-label="Send message to username12"
+                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseMove={[Function]}
+                                              onPointerDown={[Function]}
+                                              onPointerEnter={[Function]}
                                             >
-                                              <DMButton
-                                                aria-label="Send message to username12"
-                                                className="btn btn-icon btn-xs"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Send message to username12"
-                                                  className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                >
-                                                  <i
-                                                    className="icon icon-send"
-                                                  />
-                                                </button>
-                                              </DMButton>
-                                            </OverlayTrigger>
-                                          </OverlayTrigger>
+                                              <i
+                                                className="icon icon-send"
+                                              />
+                                            </button>
+                                          </DMButton>
                                         </WithTooltip>
                                       </div>
                                     </DMContainer>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
index 6de127da9c..e8bf00e2bf 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
@@ -406,7 +406,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     <span
                                       className="status-wrapper"
                                     >
-                                      <Memo(Avatar)
+                                      <Avatar
                                         className="avatar-post-preview"
                                         size="sm"
                                         tabIndex={-1}
@@ -421,7 +421,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           src="/api/v4/users/id0/image?_=0"
                                           tabIndex={-1}
                                         />
-                                      </Memo(Avatar)>
+                                      </Avatar>
                                       <Memo(StatusIcon)
                                         status="offline"
                                       >
@@ -482,102 +482,37 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
                                 <WithTooltip
-                                  id="name-id0"
-                                  placement="top"
                                   title="Send message"
                                 >
-                                  <OverlayTrigger
-                                    defaultOverlayShown={false}
-                                    delay={400}
-                                    disabled={false}
-                                    overlay={<Unknown />}
-                                    placement="top"
-                                    trigger={
-                                      Array [
-                                        "hover",
-                                        "focus",
-                                      ]
-                                    }
+                                  <DMButton
+                                    aria-label="Send message to Name0 Surname0"
+                                    className="btn btn-icon btn-xs"
+                                    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",
-                                        ]
-                                      }
+                                    <button
+                                      aria-label="Send message to Name0 Surname0"
+                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseMove={[Function]}
+                                      onPointerDown={[Function]}
+                                      onPointerEnter={[Function]}
                                     >
-                                      <DMButton
-                                        aria-label="Send message to Name0 Surname0"
-                                        className="btn btn-icon btn-xs"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <button
-                                          aria-label="Send message to Name0 Surname0"
-                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                        >
-                                          <i
-                                            className="icon icon-send"
-                                          />
-                                        </button>
-                                      </DMButton>
-                                    </OverlayTrigger>
-                                  </OverlayTrigger>
+                                      <i
+                                        className="icon icon-send"
+                                      />
+                                    </button>
+                                  </DMButton>
                                 </WithTooltip>
                               </div>
                             </DMContainer>
@@ -650,7 +585,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     <span
                                       className="status-wrapper"
                                     >
-                                      <Memo(Avatar)
+                                      <Avatar
                                         className="avatar-post-preview"
                                         size="sm"
                                         tabIndex={-1}
@@ -665,7 +600,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           src="/api/v4/users/id1/image?_=0"
                                           tabIndex={-1}
                                         />
-                                      </Memo(Avatar)>
+                                      </Avatar>
                                       <Memo(StatusIcon)
                                         status="offline"
                                       >
@@ -726,102 +661,37 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
                                 <WithTooltip
-                                  id="name-id1"
-                                  placement="top"
                                   title="Send message"
                                 >
-                                  <OverlayTrigger
-                                    defaultOverlayShown={false}
-                                    delay={400}
-                                    disabled={false}
-                                    overlay={<Unknown />}
-                                    placement="top"
-                                    trigger={
-                                      Array [
-                                        "hover",
-                                        "focus",
-                                      ]
-                                    }
+                                  <DMButton
+                                    aria-label="Send message to Name1 Surname1"
+                                    className="btn btn-icon btn-xs"
+                                    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",
-                                        ]
-                                      }
+                                    <button
+                                      aria-label="Send message to Name1 Surname1"
+                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseMove={[Function]}
+                                      onPointerDown={[Function]}
+                                      onPointerEnter={[Function]}
                                     >
-                                      <DMButton
-                                        aria-label="Send message to Name1 Surname1"
-                                        className="btn btn-icon btn-xs"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <button
-                                          aria-label="Send message to Name1 Surname1"
-                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                        >
-                                          <i
-                                            className="icon icon-send"
-                                          />
-                                        </button>
-                                      </DMButton>
-                                    </OverlayTrigger>
-                                  </OverlayTrigger>
+                                      <i
+                                        className="icon icon-send"
+                                      />
+                                    </button>
+                                  </DMButton>
                                 </WithTooltip>
                               </div>
                             </DMContainer>
@@ -894,7 +764,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     <span
                                       className="status-wrapper"
                                     >
-                                      <Memo(Avatar)
+                                      <Avatar
                                         className="avatar-post-preview"
                                         size="sm"
                                         tabIndex={-1}
@@ -909,7 +779,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           src="/api/v4/users/id2/image?_=0"
                                           tabIndex={-1}
                                         />
-                                      </Memo(Avatar)>
+                                      </Avatar>
                                       <Memo(StatusIcon)
                                         status="offline"
                                       >
@@ -970,102 +840,37 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
                                 <WithTooltip
-                                  id="name-id2"
-                                  placement="top"
                                   title="Send message"
                                 >
-                                  <OverlayTrigger
-                                    defaultOverlayShown={false}
-                                    delay={400}
-                                    disabled={false}
-                                    overlay={<Unknown />}
-                                    placement="top"
-                                    trigger={
-                                      Array [
-                                        "hover",
-                                        "focus",
-                                      ]
-                                    }
+                                  <DMButton
+                                    aria-label="Send message to Name2 Surname2"
+                                    className="btn btn-icon btn-xs"
+                                    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",
-                                        ]
-                                      }
+                                    <button
+                                      aria-label="Send message to Name2 Surname2"
+                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseMove={[Function]}
+                                      onPointerDown={[Function]}
+                                      onPointerEnter={[Function]}
                                     >
-                                      <DMButton
-                                        aria-label="Send message to Name2 Surname2"
-                                        className="btn btn-icon btn-xs"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <button
-                                          aria-label="Send message to Name2 Surname2"
-                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                        >
-                                          <i
-                                            className="icon icon-send"
-                                          />
-                                        </button>
-                                      </DMButton>
-                                    </OverlayTrigger>
-                                  </OverlayTrigger>
+                                      <i
+                                        className="icon icon-send"
+                                      />
+                                    </button>
+                                  </DMButton>
                                 </WithTooltip>
                               </div>
                             </DMContainer>
@@ -1138,7 +943,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     <span
                                       className="status-wrapper"
                                     >
-                                      <Memo(Avatar)
+                                      <Avatar
                                         className="avatar-post-preview"
                                         size="sm"
                                         tabIndex={-1}
@@ -1153,7 +958,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           src="/api/v4/users/id3/image?_=0"
                                           tabIndex={-1}
                                         />
-                                      </Memo(Avatar)>
+                                      </Avatar>
                                       <Memo(StatusIcon)
                                         status="offline"
                                       >
@@ -1214,102 +1019,37 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
                                 <WithTooltip
-                                  id="name-id3"
-                                  placement="top"
                                   title="Send message"
                                 >
-                                  <OverlayTrigger
-                                    defaultOverlayShown={false}
-                                    delay={400}
-                                    disabled={false}
-                                    overlay={<Unknown />}
-                                    placement="top"
-                                    trigger={
-                                      Array [
-                                        "hover",
-                                        "focus",
-                                      ]
-                                    }
+                                  <DMButton
+                                    aria-label="Send message to Name3 Surname3"
+                                    className="btn btn-icon btn-xs"
+                                    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",
-                                        ]
-                                      }
+                                    <button
+                                      aria-label="Send message to Name3 Surname3"
+                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseMove={[Function]}
+                                      onPointerDown={[Function]}
+                                      onPointerEnter={[Function]}
                                     >
-                                      <DMButton
-                                        aria-label="Send message to Name3 Surname3"
-                                        className="btn btn-icon btn-xs"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <button
-                                          aria-label="Send message to Name3 Surname3"
-                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                        >
-                                          <i
-                                            className="icon icon-send"
-                                          />
-                                        </button>
-                                      </DMButton>
-                                    </OverlayTrigger>
-                                  </OverlayTrigger>
+                                      <i
+                                        className="icon icon-send"
+                                      />
+                                    </button>
+                                  </DMButton>
                                 </WithTooltip>
                               </div>
                             </DMContainer>
@@ -1382,7 +1122,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     <span
                                       className="status-wrapper"
                                     >
-                                      <Memo(Avatar)
+                                      <Avatar
                                         className="avatar-post-preview"
                                         size="sm"
                                         tabIndex={-1}
@@ -1397,7 +1137,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           src="/api/v4/users/id4/image?_=0"
                                           tabIndex={-1}
                                         />
-                                      </Memo(Avatar)>
+                                      </Avatar>
                                       <Memo(StatusIcon)
                                         status="offline"
                                       >
@@ -1458,102 +1198,37 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
                                 <WithTooltip
-                                  id="name-id4"
-                                  placement="top"
                                   title="Send message"
                                 >
-                                  <OverlayTrigger
-                                    defaultOverlayShown={false}
-                                    delay={400}
-                                    disabled={false}
-                                    overlay={<Unknown />}
-                                    placement="top"
-                                    trigger={
-                                      Array [
-                                        "hover",
-                                        "focus",
-                                      ]
-                                    }
+                                  <DMButton
+                                    aria-label="Send message to Name4 Surname4"
+                                    className="btn btn-icon btn-xs"
+                                    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",
-                                        ]
-                                      }
+                                    <button
+                                      aria-label="Send message to Name4 Surname4"
+                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseMove={[Function]}
+                                      onPointerDown={[Function]}
+                                      onPointerEnter={[Function]}
                                     >
-                                      <DMButton
-                                        aria-label="Send message to Name4 Surname4"
-                                        className="btn btn-icon btn-xs"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <button
-                                          aria-label="Send message to Name4 Surname4"
-                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                        >
-                                          <i
-                                            className="icon icon-send"
-                                          />
-                                        </button>
-                                      </DMButton>
-                                    </OverlayTrigger>
-                                  </OverlayTrigger>
+                                      <i
+                                        className="icon icon-send"
+                                      />
+                                    </button>
+                                  </DMButton>
                                 </WithTooltip>
                               </div>
                             </DMContainer>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
index 04249dd22c..b76163ede6 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
@@ -197,9 +197,7 @@ const GroupMemberList = (props: Props) => {
                     </ProfilePopover>
                     <DMContainer className='group-member-list_dm-button'>
                         <WithTooltip
-                            id={`name-${user.id}`}
                             title={formatMessage({id: 'group_member_list.sendMessageTooltip', defaultMessage: 'Send message'})}
-                            placement='top'
                         >
                             <DMButton
                                 className='btn btn-icon btn-xs'
diff --git a/webapp/channels/src/components/user_profile/user_profile.tsx b/webapp/channels/src/components/user_profile/user_profile.tsx
index 740a67a5b0..da960b1050 100644
--- a/webapp/channels/src/components/user_profile/user_profile.tsx
+++ b/webapp/channels/src/components/user_profile/user_profile.tsx
@@ -86,7 +86,6 @@ export default function UserProfile({
             </ProfilePopover>
             {userIsRemote &&
             <SharedUserIndicator
-                id={`sharedUserIndicator-${userId}`}
                 className='shared-user-icon'
                 withTooltip={true}
             />
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
index de04fa45a9..4eed442c91 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
@@ -428,8 +428,6 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
             </option>
           </select>
           <WithTooltip
-            id="code-popover"
-            placement="top"
             title={
               <div
                 className="code-popover"
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
index 9b91570bf2..62040fe8ec 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
@@ -331,8 +331,6 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
                                 {codeThemeOptions}
                             </select>
                             <WithTooltip
-                                placement='top'
-                                id='code-popover'
                                 title={
                                     <div className='code-popover'>
                                         <img
diff --git a/webapp/channels/src/components/widgets/inputs/input/input.tsx b/webapp/channels/src/components/widgets/inputs/input/input.tsx
index e6d271b5a5..f59e2db961 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/input/input.tsx
@@ -146,9 +146,7 @@ const Input = React.forwardRef((
             onTouchEnd={handleOnClear}
         >
             <WithTooltip
-                id='inputClearTooltip'
                 title={clearableTooltipText || formatMessage({id: 'widget.input.clear', defaultMessage: 'Clear'})}
-                placement='bottom'
             >
                 <CloseCircleIcon size={18}/>
             </WithTooltip>
diff --git a/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx b/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx
index 64f1c7fd5b..d2b3f4717e 100644
--- a/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx
@@ -92,9 +92,7 @@ function UrlInput({
             <div className='url-input-container'>
                 {isShortenedURL ? (
                     <WithTooltip
-                        id='urlTooltip'
                         title={fullURL}
-                        placement='top'
                     >
                         {urlInputLabel}
                     </WithTooltip>
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx b/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx
index 8af881cd4a..046cab0880 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx
@@ -88,7 +88,6 @@ const RestrictedIndicator = ({
     return (
         <span className='RestrictedIndicator__icon-tooltip-container'>
             <WithTooltip
-                id={`${feature}-tooltip`}
                 title={
                     <div className='RestrictedIndicator__icon-tooltip'>
                         <span className='title'>
@@ -103,7 +102,6 @@ const RestrictedIndicator = ({
                         </span>
                     </div>
                 }
-                placement='right'
             >
                 {useModal && blocked ? (
                     <span>
diff --git a/webapp/channels/src/components/widgets/public-private-selector/public-private-selector.tsx b/webapp/channels/src/components/widgets/public-private-selector/public-private-selector.tsx
index b6299a8a71..e209f13f95 100644
--- a/webapp/channels/src/components/widgets/public-private-selector/public-private-selector.tsx
+++ b/webapp/channels/src/components/widgets/public-private-selector/public-private-selector.tsx
@@ -80,8 +80,6 @@ const BigButtonSelector = ({
 
     return (
         <WithTooltip
-            id="'public-private-selector-button-tooltip'"
-            placement='top'
             title={tooltip}
         >
             {button}
diff --git a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
index 8627adebe6..d784c1f3ce 100644
--- a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
+++ b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {memo} from 'react';
-import type {HTMLAttributes, SyntheticEvent} from 'react';
+import React, {memo, forwardRef} from 'react';
+import type {HTMLAttributes, RefObject, SyntheticEvent} from 'react';
 import {useIntl} from 'react-intl';
 
 import {Client4} from 'mattermost-redux/client';
@@ -50,13 +50,13 @@ type Attrs = HTMLAttributes<HTMLElement>;
 const isURLForUser = (url: string) => url.startsWith(Client4.getUsersRoute());
 const replaceURLWithDefaultImageURL = (url: string) => url.replace(/\?_=(\w+)/, '/default');
 
-const Avatar = ({
+const Avatar = forwardRef<HTMLElement, Props & Attrs>(({
     url,
     username,
     size = 'md',
     text,
     ...attrs
-}: Props & Attrs) => {
+}, ref) => {
     const {formatMessage} = useIntl();
 
     const classes = classNames(`Avatar Avatar-${size}`, attrs.className);
@@ -65,6 +65,7 @@ const Avatar = ({
         return (
             <div
                 {...attrs}
+                ref={ref as RefObject<HTMLDivElement>}
                 className={classNames(classes, 'Avatar-plain')}
                 data-content={text}
             />
@@ -82,6 +83,7 @@ const Avatar = ({
     return (
         <img
             {...attrs}
+            ref={ref as RefObject<HTMLImageElement>}
             className={classes}
             alt={formatMessage({id: 'avatar.alt', defaultMessage: '{username} profile image'}, {
                 username: username || 'user',
@@ -91,5 +93,8 @@ const Avatar = ({
             onError={handleOnError}
         />
     );
-};
+});
+
+Avatar.displayName = 'Avatar';
+
 export default memo(Avatar);
diff --git a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
index 1cb2cc7aa6..d9db0a7678 100644
--- a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
@@ -44,113 +44,46 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-1"
-            placement="top"
             title="first.last1"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/1/image?_=1620680333191"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/1/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/1/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/1/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
@@ -182,113 +115,46 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-6"
-            placement="top"
             title="Someone"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/6/image?_=0"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/6/image?_=0"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/6/image?_=0"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/6/image?_=0"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
@@ -320,222 +186,88 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-7"
-            placement="top"
             title="Someone"
           >
-            <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
-                  }
-                  tabIndex={-1}
-                  url="/api/v4/users/7/image?_=0"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/7/image?_=0"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
-          </WithTooltip>
-        </button>
-      </ProfilePopoverController>
-    </UserAvatar>
-    <WithTooltip
-      id="names-overflow"
-      placement="top"
-      title="first.last2, Someone, Someone"
-    >
-      <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",
-            ]
-          }
-        >
-          <Memo(Avatar)
-            onBlur={[Function]}
-            onClick={null}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            size="xl"
-            style={
-              Object {
-                "background": "rgb(240, 240, 241)",
-              }
-            }
-            tabIndex={0}
-            text="+3"
-          >
-            <div
-              className="Avatar Avatar-xl Avatar-plain"
-              data-content="+3"
+            <Avatar
               onBlur={[Function]}
-              onClick={null}
               onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
               style={
                 Object {
                   "background": "rgb(240, 240, 241)",
                 }
               }
-              tabIndex={0}
-            />
-          </Memo(Avatar)>
-        </OverlayTrigger>
-      </OverlayTrigger>
+              tabIndex={-1}
+              url="/api/v4/users/7/image?_=0"
+            >
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/7/image?_=0"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
+                  }
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
+          </WithTooltip>
+        </button>
+      </ProfilePopoverController>
+    </UserAvatar>
+    <WithTooltip
+      title="first.last2, Someone, Someone"
+    >
+      <Avatar
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseMove={[Function]}
+        onPointerDown={[Function]}
+        onPointerEnter={[Function]}
+        size="xl"
+        style={
+          Object {
+            "background": "rgb(240, 240, 241)",
+          }
+        }
+        tabIndex={0}
+        text="+3"
+      >
+        <div
+          className="Avatar Avatar-xl Avatar-plain"
+          data-content="+3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onPointerDown={[Function]}
+          onPointerEnter={[Function]}
+          style={
+            Object {
+              "background": "rgb(240, 240, 241)",
+            }
+          }
+          tabIndex={0}
+        />
+      </Avatar>
     </WithTooltip>
   </div>
 </Memo(Avatars)>
@@ -584,113 +316,46 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-1"
-            placement="top"
             title="first.last1"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/1/image?_=1620680333191"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/1/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/1/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/1/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
@@ -722,113 +387,46 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-2"
-            placement="top"
             title="first.last2"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/2/image?_=1620680333191"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/2/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/2/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/2/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
@@ -860,222 +458,88 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-3"
-            placement="top"
             title="first.last3"
           >
-            <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
-                  }
-                  tabIndex={-1}
-                  url="/api/v4/users/3/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/3/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
-          </WithTooltip>
-        </button>
-      </ProfilePopoverController>
-    </UserAvatar>
-    <WithTooltip
-      id="names-overflow"
-      placement="top"
-      title="first.last4, first.last5"
-    >
-      <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",
-            ]
-          }
-        >
-          <Memo(Avatar)
-            onBlur={[Function]}
-            onClick={null}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            size="xl"
-            style={
-              Object {
-                "background": "rgb(240, 240, 241)",
-              }
-            }
-            tabIndex={0}
-            text="+2"
-          >
-            <div
-              className="Avatar Avatar-xl Avatar-plain"
-              data-content="+2"
+            <Avatar
               onBlur={[Function]}
-              onClick={null}
               onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
               style={
                 Object {
                   "background": "rgb(240, 240, 241)",
                 }
               }
-              tabIndex={0}
-            />
-          </Memo(Avatar)>
-        </OverlayTrigger>
-      </OverlayTrigger>
+              tabIndex={-1}
+              url="/api/v4/users/3/image?_=1620680333191"
+            >
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/3/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
+                  }
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
+          </WithTooltip>
+        </button>
+      </ProfilePopoverController>
+    </UserAvatar>
+    <WithTooltip
+      title="first.last4, first.last5"
+    >
+      <Avatar
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseMove={[Function]}
+        onPointerDown={[Function]}
+        onPointerEnter={[Function]}
+        size="xl"
+        style={
+          Object {
+            "background": "rgb(240, 240, 241)",
+          }
+        }
+        tabIndex={0}
+        text="+2"
+      >
+        <div
+          className="Avatar Avatar-xl Avatar-plain"
+          data-content="+2"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onPointerDown={[Function]}
+          onPointerEnter={[Function]}
+          style={
+            Object {
+              "background": "rgb(240, 240, 241)",
+            }
+          }
+          tabIndex={0}
+        />
+      </Avatar>
     </WithTooltip>
   </div>
 </Memo(Avatars)>
@@ -1122,113 +586,46 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-1"
-            placement="top"
             title="first.last1"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/1/image?_=1620680333191"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/1/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/1/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/1/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
@@ -1260,113 +657,46 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-2"
-            placement="top"
             title="first.last2"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/2/image?_=1620680333191"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/2/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/2/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/2/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
@@ -1398,113 +728,46 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
           onPointerDown={[Function]}
         >
           <WithTooltip
-            id="tooltip-name-3"
-            placement="top"
             title="first.last3"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              disabled={false}
-              overlay={<Unknown />}
-              placement="top"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+            <Avatar
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onPointerDown={[Function]}
+              onPointerEnter={[Function]}
+              size="xl"
+              style={
+                Object {
+                  "background": "rgb(240, 240, 241)",
+                }
               }
+              tabIndex={-1}
+              url="/api/v4/users/3/image?_=1620680333191"
             >
-              <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",
-                  ]
-                }
-              >
-                <Memo(Avatar)
-                  onBlur={[Function]}
-                  onClick={null}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  size="xl"
-                  style={
-                    Object {
-                      "background": "rgb(240, 240, 241)",
-                    }
+              <img
+                alt="user profile image"
+                className="Avatar Avatar-xl"
+                loading="lazy"
+                onBlur={[Function]}
+                onError={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseMove={[Function]}
+                onPointerDown={[Function]}
+                onPointerEnter={[Function]}
+                src="/api/v4/users/3/image?_=1620680333191"
+                style={
+                  Object {
+                    "background": "rgb(240, 240, 241)",
                   }
-                  tabIndex={-1}
-                  url="/api/v4/users/3/image?_=1620680333191"
-                >
-                  <img
-                    alt="user profile image"
-                    className="Avatar Avatar-xl"
-                    loading="lazy"
-                    onBlur={[Function]}
-                    onClick={null}
-                    onError={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    src="/api/v4/users/3/image?_=1620680333191"
-                    style={
-                      Object {
-                        "background": "rgb(240, 240, 241)",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </Memo(Avatar)>
-              </OverlayTrigger>
-            </OverlayTrigger>
+                }
+                tabIndex={-1}
+              />
+            </Avatar>
           </WithTooltip>
         </button>
       </ProfilePopoverController>
diff --git a/webapp/channels/src/components/widgets/users/avatars/avatars.test.tsx b/webapp/channels/src/components/widgets/users/avatars/avatars.test.tsx
index 8d7bebc388..d187e61fbb 100644
--- a/webapp/channels/src/components/widgets/users/avatars/avatars.test.tsx
+++ b/webapp/channels/src/components/widgets/users/avatars/avatars.test.tsx
@@ -4,6 +4,14 @@
 import {mount} from 'enzyme';
 import React from 'react';
 
+import WithTooltip from 'components/with_tooltip';
+
+import {mockStore} from 'tests/test_store';
+
+import Avatars from './avatars';
+
+import Avatar from '../avatar';
+
 jest.mock('mattermost-redux/actions/users', () => {
     return {
         ...jest.requireActual('mattermost-redux/actions/users'),
@@ -16,14 +24,6 @@ jest.mock('mattermost-redux/actions/users', () => {
     };
 });
 
-import WithTooltip from 'components/with_tooltip';
-
-import {mockStore} from 'tests/test_store';
-
-import Avatars from './avatars';
-
-import Avatar from '../avatar';
-
 describe('components/widgets/users/Avatars', () => {
     const state = {
         entities: {
@@ -149,7 +149,7 @@ describe('components/widgets/users/Avatars', () => {
             mountOptions,
         );
 
-        expect(wrapper.find(WithTooltip).find({id: 'names-overflow'}).prop('title')).toBe('first.last4, first.last5');
+        expect(wrapper.find(WithTooltip).find({title: 'first.last4, first.last5'})).toBeDefined();
     });
 
     test('should fetch missing users', () => {
@@ -178,6 +178,6 @@ describe('components/widgets/users/Avatars', () => {
         expect(wrapper.find(Avatar).find({url: '/api/v4/users/1/image?_=1620680333191'}).exists()).toBe(true);
         expect(wrapper.find(Avatar).find({url: '/api/v4/users/6/image?_=0'}).exists()).toBe(true);
         expect(wrapper.find(Avatar).find({url: '/api/v4/users/7/image?_=0'}).exists()).toBe(true);
-        expect(wrapper.find(WithTooltip).find({id: 'names-overflow'}).prop('title')).toBe('first.last2, Someone, Someone');
+        expect(wrapper.find(WithTooltip).find({title: 'first.last2, Someone, Someone'}).exists()).toBe(true);
     });
 });
diff --git a/webapp/channels/src/components/widgets/users/avatars/avatars.tsx b/webapp/channels/src/components/widgets/users/avatars/avatars.tsx
index 5ff2e7a0d9..e538ac606a 100644
--- a/webapp/channels/src/components/widgets/users/avatars/avatars.tsx
+++ b/webapp/channels/src/components/widgets/users/avatars/avatars.tsx
@@ -68,9 +68,7 @@ function UserAvatar({
             src={profilePictureURL}
         >
             <WithTooltip
-                id={`tooltip-name-${userId}`}
                 title={name}
-                placement='top'
             >
                 <Avatar
                     url={imageURLForUser(userId, user?.last_picture_update)}
@@ -144,8 +142,6 @@ function Avatars({
             ))}
             {Boolean(nonDisplayCount) && (
                 <WithTooltip
-                    id={'names-overflow'}
-                    placement='top'
                     title={overflowUsersTooltip}
                 >
                     <Avatar
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/__snapshots__/tooltip_content.test.tsx.snap b/webapp/channels/src/components/with_tooltip/__snapshots__/tooltip_content.test.tsx.snap
similarity index 100%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/__snapshots__/tooltip_content.test.tsx.snap
rename to webapp/channels/src/components/with_tooltip/__snapshots__/tooltip_content.test.tsx.snap
diff --git a/webapp/channels/src/components/with_tooltip/create_tooltip.tsx b/webapp/channels/src/components/with_tooltip/create_tooltip.tsx
deleted file mode 100644
index d4bdcf6d83..0000000000
--- a/webapp/channels/src/components/with_tooltip/create_tooltip.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import type {ComponentProps} from 'react';
-import {type MessageDescriptor} from 'react-intl';
-
-import RenderEmoji from 'components/emoji/render_emoji';
-
-import {formatAsComponent} from 'utils/i18n';
-
-import {TooltipShortcutSequence, type ShortcutDefinition} from './shortcut';
-import BSTooltip from './tooltip';
-
-type EmojiStyle = 'inline' | 'large' | undefined;
-
-export type CommonTooltipProps = {
-    id: string;
-    title: string | MessageDescriptor | React.ReactElement;
-    hint?: string | MessageDescriptor | React.ReactElement;
-    shortcut?: ShortcutDefinition;
-    emoji?: string;
-    emojiStyle?: EmojiStyle;
-}
-
-export function createTooltip(commonTooltipProps: CommonTooltipProps) {
-    return (props: Omit<ComponentProps<typeof BSTooltip>, 'children' | 'id'>) => {
-        const contents = [];
-
-        if (commonTooltipProps.emoji && commonTooltipProps.emojiStyle === 'large') {
-            contents.push(
-                <div
-                    key='emoji'
-                    className='tooltip-large-emoji'
-                >
-                    <RenderEmoji
-                        emojiName={commonTooltipProps.emoji}
-                        size={48}
-                    />
-                </div>,
-            );
-        }
-
-        const title = formatAsComponent(commonTooltipProps.title);
-        if (commonTooltipProps.emoji && commonTooltipProps.emojiStyle !== 'large') {
-            contents.push(
-                <div
-                    key='title'
-                    className={'tooltip-title'}
-                >
-                    <RenderEmoji
-                        emojiName={commonTooltipProps.emoji}
-                        size={16}
-                    />
-                    {title}
-                </div>,
-            );
-        } else {
-            contents.push(
-                <div
-                    key='title'
-                    className={'tooltip-title'}
-                >
-                    {title}
-                </div>,
-            );
-        }
-
-        if (commonTooltipProps.shortcut) {
-            contents.push(
-                <div
-                    key='shortcut'
-                    className={'tooltip-shortcuts-container'}
-                >
-                    <TooltipShortcutSequence shortcut={commonTooltipProps.shortcut}/>
-                </div>,
-            );
-        }
-
-        const hint = formatAsComponent(commonTooltipProps.hint);
-        if (commonTooltipProps.hint) {
-            contents.push(
-                <div
-                    key='hint'
-                    className={'tooltip-hint'}
-                >
-                    {hint}
-                </div>,
-            );
-        }
-
-        return (
-            <BSTooltip
-                {...props}
-                id={commonTooltipProps.id}
-            >
-                {contents}
-            </BSTooltip>
-        );
-    };
-}
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/index.test.tsx b/webapp/channels/src/components/with_tooltip/index.test.tsx
similarity index 100%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/index.test.tsx
rename to webapp/channels/src/components/with_tooltip/index.test.tsx
diff --git a/webapp/channels/src/components/with_tooltip/index.tsx b/webapp/channels/src/components/with_tooltip/index.tsx
index e446097195..a9785359dd 100644
--- a/webapp/channels/src/components/with_tooltip/index.tsx
+++ b/webapp/channels/src/components/with_tooltip/index.tsx
@@ -1,59 +1,211 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useMemo} from 'react';
-import type {ComponentProps} from 'react';
+import type {Placement} from '@floating-ui/react';
+import {
+    useFloating,
+    autoUpdate,
+    offset,
+    useHover,
+    useFocus,
+    useDismiss,
+    useRole,
+    useInteractions,
+    arrow,
+    FloatingPortal,
+    useTransitionStyles,
+    FloatingArrow,
+    flip,
+    useMergeRefs,
+} from '@floating-ui/react';
+import classNames from 'classnames';
+import React, {useRef, useState, useMemo, cloneElement, isValidElement} from 'react';
+import type {ReactElement, ReactNode} from 'react';
+import type {MessageDescriptor} from 'react-intl';
+import {defineMessage} from 'react-intl';
 
-import Constants from 'utils/constants';
+import {Constants} from 'utils/constants';
 
-import type {CommonTooltipProps} from './create_tooltip';
-import {createTooltip} from './create_tooltip';
-import OverlayTrigger from './overlay_trigger';
+import TooltipContent from './tooltip_content';
+import type {ShortcutDefinition} from './tooltip_shortcut';
 
-type OverlayTriggerProps = ComponentProps<typeof OverlayTrigger>;
+import './tooltip.scss';
 
-type WithTooltipProps = {
-    children: OverlayTriggerProps['children'];
-    placement: OverlayTriggerProps['placement'];
-    onShow?: () => void;
-    delayHide?: number;
-    disabled?: boolean;
-} & CommonTooltipProps;
+const ARROW_WIDTH = 10; // in px
+const ARROW_HEIGHT = 6; // in px
+const ARROW_OFFSET = 8; // in px
 
-const WithTooltip = ({
-    id,
-    title,
-    emoji,
-    emojiStyle,
-    hint,
-    shortcut,
-    placement,
-    onShow,
-    delayHide,
-    children,
-    disabled = false,
-}: WithTooltipProps) => {
-    const ThisTooltip = useMemo(() => createTooltip({
-        id,
-        title,
-        emoji,
-        emojiStyle,
-        hint,
-        shortcut,
-    }), [id, title, emoji, emojiStyle, hint, shortcut]);
+const TOOLTIP_REST_TIME_BEFORE_OPEN = 400; // in ms
+const TOOLTIP_APPEAR_DURATION = 250; // in ms
+const TOOLTIP_DISAPPEAR_DURATION = 200; // in ms
 
-    return (
-        <OverlayTrigger
-            delay={Constants.OVERLAY_TIME_DELAY}
-            overlay={<ThisTooltip/>}
-            placement={placement}
-            onEnter={onShow}
-            delayHide={delayHide}
-            disabled={disabled}
-        >
-            {children}
-        </OverlayTrigger>
-    );
+export const ShortcutKeys = {
+    alt: defineMessage({
+        id: 'shortcuts.generic.alt',
+        defaultMessage: 'Alt',
+    }),
+    cmd: '⌘',
+    ctrl: defineMessage({
+        id: 'shortcuts.generic.ctrl',
+        defaultMessage: 'Ctrl',
+    }),
+    option: '⌥',
+    shift: defineMessage({
+        id: 'shortcuts.generic.shift',
+        defaultMessage: 'Shift',
+    }),
 };
 
+interface Props {
+    title: string | ReactNode | MessageDescriptor;
+    emoji?: string;
+    isEmojiLarge?: boolean;
+    hint?: string | ReactNode | MessageDescriptor;
+    shortcut?: ShortcutDefinition;
+
+    /**
+     * Whether the tooltip should be vertical or horizontal, by default it is vertical
+     * This doesn't always guarantee the tooltip will be vertical, it just determines the initial placement and fallback placements
+    */
+    isVertical?: boolean;
+    tooltipContentContainerClassName?: string;
+    disabled?: boolean;
+
+    /**
+    * @deprecated Do not use this except for special cases
+    * Callback when the tooltip appears
+   */
+    onOpen?: () => void;
+    children: ReactElement;
+}
+
+function WithTooltip({
+    children,
+    title,
+    emoji,
+    isEmojiLarge = false,
+    hint,
+    shortcut,
+    isVertical = true,
+    tooltipContentContainerClassName,
+    onOpen,
+    disabled,
+}: Props) {
+    const [open, setOpen] = useState(false);
+
+    const arrowRef = useRef(null);
+
+    function handleChange(open: boolean) {
+        setOpen(open);
+
+        if (onOpen && open) {
+            onOpen();
+        }
+    }
+
+    const placements = useMemo<{initial: Placement; fallback: Placement[]}>(() => {
+        let initial: Placement;
+        let fallback: Placement[];
+        if (isVertical) {
+            initial = 'top';
+            fallback = ['bottom', 'right', 'left'];
+        } else {
+            initial = 'right';
+            fallback = ['left', 'top', 'bottom'];
+        }
+        return {initial, fallback};
+    }, [isVertical]);
+
+    const {refs: {setReference, setFloating}, floatingStyles, context} = useFloating({
+        open: disabled ? false : open,
+        onOpenChange: handleChange,
+        whileElementsMounted: autoUpdate,
+        placement: placements.initial,
+        middleware: [
+            offset(ARROW_OFFSET),
+            flip({
+                fallbackPlacements: placements.fallback,
+            }),
+            arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+
+    const hover = useHover(context, {
+        restMs: TOOLTIP_REST_TIME_BEFORE_OPEN,
+        delay: {
+            open: Constants.OVERLAY_TIME_DELAY,
+        },
+    });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, {role: 'tooltip'});
+
+    const {getReferenceProps, getFloatingProps} = useInteractions([hover, focus, dismiss, role]);
+    const {isMounted, styles: transitionStyles} = useTransitionStyles(context, {
+        duration: {
+            open: TOOLTIP_APPEAR_DURATION,
+            close: TOOLTIP_DISAPPEAR_DURATION,
+        },
+        initial: {
+            opacity: 0,
+        },
+        common: {
+            opacity: 1,
+        },
+    });
+
+    if (!isValidElement(children)) {
+        // eslint-disable-next-line no-console
+        console.error('Children must be a valid React element for WithTooltip');
+    }
+
+    const mergedRefs = useMergeRefs([(children as any)?.ref, setReference]);
+
+    const trigger = cloneElement(children, {
+        ...getReferenceProps({
+            ref: mergedRefs,
+            ...children.props,
+        }),
+    });
+
+    return (
+        <>
+            {trigger}
+            {isMounted && (
+                <FloatingPortal
+                    id='root-portal' // This is the global portal container id
+                >
+                    <div
+                        className='tooltipContainer'
+                        ref={setFloating}
+                        style={floatingStyles}
+                        {...getFloatingProps()}
+                    >
+                        <div
+                            className={classNames('tooltipContentContainer', tooltipContentContainerClassName)}
+                            style={transitionStyles}
+                        >
+                            <TooltipContent
+                                title={title}
+                                emoji={emoji}
+                                isEmojiLarge={isEmojiLarge}
+                                hint={hint}
+                                shortcut={shortcut}
+                            />
+                            <FloatingArrow
+                                ref={arrowRef}
+                                context={context}
+                                width={ARROW_WIDTH}
+                                height={ARROW_HEIGHT}
+                            />
+                        </div>
+                    </div>
+                </FloatingPortal>
+            )}
+        </>
+    );
+}
+
 export default WithTooltip;
diff --git a/webapp/channels/src/components/with_tooltip/overlay_trigger.tsx b/webapp/channels/src/components/with_tooltip/overlay_trigger.tsx
deleted file mode 100644
index 927cc14067..0000000000
--- a/webapp/channels/src/components/with_tooltip/overlay_trigger.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {OverlayTrigger as OriginalOverlayTrigger} from 'react-bootstrap'; // eslint-disable-line no-restricted-imports
-import type {OverlayTriggerProps} from 'react-bootstrap';
-import {IntlContext} from 'react-intl';
-import type {IntlShape} from 'react-intl';
-import {Provider, useStore} from 'react-redux';
-
-export type BaseOverlayTrigger = OriginalOverlayTrigger & {
-    hide: () => void;
-};
-
-type Props = OverlayTriggerProps & {
-    disabled?: boolean;
-    className?: string;
-};
-
-/**
- * @deprecated Use (and expand when strictly needed) WithTooltip instead
- */
-const OverlayTrigger = React.forwardRef((props: Props, ref?: React.Ref<OriginalOverlayTrigger>) => {
-    const {overlay, disabled, ...otherProps} = props;
-
-    const store = useStore();
-
-    // The overlay is rendered outside of the regular React context, and our version react-bootstrap can't forward
-    // that context itself, so we have to manually forward the react-intl context to this component's child.
-    const OverlayWrapper = ({intl, ...overlayProps}: {intl: IntlShape}) => (
-        <Provider store={store}>
-            <IntlContext.Provider value={intl}>{React.cloneElement(overlay, overlayProps)}</IntlContext.Provider>
-        </Provider>
-    );
-
-    return (
-        <IntlContext.Consumer>
-            {(intl): React.ReactNode => {
-                const overlayProps = {...overlay.props};
-                if (disabled) {
-                    overlayProps.style = {visibility: 'hidden', ...overlayProps.style};
-                }
-                return (
-                    <OriginalOverlayTrigger
-                        {...otherProps}
-                        ref={ref}
-                        overlay={
-                            <OverlayWrapper
-                                {...overlayProps}
-                                intl={intl}
-                            />
-                        }
-                    />
-                );
-            }}
-        </IntlContext.Consumer>
-    );
-});
-
-OverlayTrigger.defaultProps = {
-    defaultOverlayShown: false,
-    trigger: ['hover', 'focus'],
-};
-OverlayTrigger.displayName = 'OverlayTrigger';
-
-export default OverlayTrigger;
diff --git a/webapp/channels/src/components/with_tooltip/shortcut.tsx b/webapp/channels/src/components/with_tooltip/shortcut.tsx
deleted file mode 100644
index 4e628f401f..0000000000
--- a/webapp/channels/src/components/with_tooltip/shortcut.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import type {MessageDescriptor} from 'react-intl';
-import {FormattedMessage, defineMessage} from 'react-intl';
-
-import {ShortcutKey, ShortcutKeyVariant} from 'components/shortcut_key';
-
-import {isMessageDescriptor} from 'utils/i18n';
-import {isMac} from 'utils/user_agent';
-
-export type ShortcutDefinition = {
-    default: ShortcutKeyDescriptor[];
-    mac?: ShortcutKeyDescriptor[];
-}
-export type ShortcutKeyDescriptor = string | MessageDescriptor;
-
-export const ShortcutKeys = {
-    alt: defineMessage({
-        id: 'shortcuts.generic.alt',
-        defaultMessage: 'Alt',
-    }),
-    cmd: '⌘',
-    ctrl: defineMessage({
-        id: 'shortcuts.generic.ctrl',
-        defaultMessage: 'Ctrl',
-    }),
-    option: '⌥',
-    shift: defineMessage({
-        id: 'shortcuts.generic.shift',
-        defaultMessage: 'Shift',
-    }),
-};
-
-type Props = {
-    shortcut: ShortcutDefinition;
-}
-
-export function TooltipShortcutSequence(props: Props) {
-    let shortcut = props.shortcut.default;
-    if (props.shortcut.mac && isMac()) {
-        shortcut = props.shortcut.mac;
-    }
-
-    return (
-        <>
-            {shortcut.map((v) => {
-                let key;
-                let content;
-                if (isMessageDescriptor(v)) {
-                    key = v.id;
-                    content = <FormattedMessage {...v}/>;
-                } else {
-                    key = v;
-                    content = v;
-                }
-
-                return (
-                    <ShortcutKey
-                        key={key}
-                        variant={ShortcutKeyVariant.Tooltip}
-                    >
-                        {content}
-                    </ShortcutKey>
-                );
-            })}
-        </>
-    );
-}
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip.scss b/webapp/channels/src/components/with_tooltip/tooltip.scss
similarity index 100%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip.scss
rename to webapp/channels/src/components/with_tooltip/tooltip.scss
diff --git a/webapp/channels/src/components/with_tooltip/tooltip.tsx b/webapp/channels/src/components/with_tooltip/tooltip.tsx
deleted file mode 100644
index a013193988..0000000000
--- a/webapp/channels/src/components/with_tooltip/tooltip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import type {CSSProperties} from 'react';
-import {Tooltip as RBTooltip} from 'react-bootstrap';
-
-type Props = {
-    id?: string;
-    className?: string;
-    style?: CSSProperties;
-    children?: React.ReactNode;
-    positionLeft?: number;
-    placement?: string;
-};
-
-/**
- * @deprecated Use (and expand when extrictly needed) WithTooltip instead
- */
-export default function Tooltip(props: Props) {
-    return (
-        <RBTooltip
-            id={props.id}
-            className={props.className}
-            positionLeft={props.positionLeft}
-            style={props.style}
-            placement={props.placement}
-        >
-            {props.children}
-        </RBTooltip>
-    );
-}
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_content.test.tsx b/webapp/channels/src/components/with_tooltip/tooltip_content.test.tsx
similarity index 100%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_content.test.tsx
rename to webapp/channels/src/components/with_tooltip/tooltip_content.test.tsx
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_content.tsx b/webapp/channels/src/components/with_tooltip/tooltip_content.tsx
similarity index 89%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_content.tsx
rename to webapp/channels/src/components/with_tooltip/tooltip_content.tsx
index 35c4552aa5..c865916e71 100644
--- a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_content.tsx
+++ b/webapp/channels/src/components/with_tooltip/tooltip_content.tsx
@@ -21,7 +21,7 @@ interface Props {
     title: string | ReactNode | MessageDescriptor;
     emoji?: string;
     isEmojiLarge?: boolean;
-    hint?: string;
+    hint?: string | ReactNode | MessageDescriptor;
     shortcut?: ShortcutDefinition;
 }
 
@@ -33,6 +33,11 @@ function TooltipContent(props: Props) {
         title = formatMessage(title);
     }
 
+    let hint = props.hint;
+    if (isMessageDescriptor(hint)) {
+        hint = formatMessage(hint);
+    }
+
     return (
         <div className='tooltipContent'>
             <span
@@ -51,7 +56,7 @@ function TooltipContent(props: Props) {
                 <span className='tooltipContentTitle'>{title}</span>
             </span>
             {props.hint && (
-                <span className='tooltipContentHint'>{props.hint}</span>
+                <span className='tooltipContentHint'>{hint}</span>
             )}
             {props.shortcut && (
                 <span className='tooltipContentShortcut'>
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_shortcut.test.tsx b/webapp/channels/src/components/with_tooltip/tooltip_shortcut.test.tsx
similarity index 100%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_shortcut.test.tsx
rename to webapp/channels/src/components/with_tooltip/tooltip_shortcut.test.tsx
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_shortcut.tsx b/webapp/channels/src/components/with_tooltip/tooltip_shortcut.tsx
similarity index 74%
rename from webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_shortcut.tsx
rename to webapp/channels/src/components/with_tooltip/tooltip_shortcut.tsx
index e18de69495..2674be3ac8 100644
--- a/webapp/channels/src/components/with_tooltip/with_tooltip_new/tooltip_shortcut.tsx
+++ b/webapp/channels/src/components/with_tooltip/tooltip_shortcut.tsx
@@ -3,14 +3,31 @@
 
 import React, {memo} from 'react';
 import type {MessageDescriptor} from 'react-intl';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import {ShortcutKey, ShortcutKeyVariant} from 'components/shortcut_key';
 
 import {isMessageDescriptor} from 'utils/i18n';
 import {isMac} from 'utils/user_agent';
 
-export type ShortcutKeyDescriptor = string | MessageDescriptor;
+export const ShortcutKeys = {
+    alt: defineMessage({
+        id: 'shortcuts.generic.alt',
+        defaultMessage: 'Alt',
+    }),
+    cmd: '⌘',
+    ctrl: defineMessage({
+        id: 'shortcuts.generic.ctrl',
+        defaultMessage: 'Ctrl',
+    }),
+    option: '⌥',
+    shift: defineMessage({
+        id: 'shortcuts.generic.shift',
+        defaultMessage: 'Shift',
+    }),
+};
+
+type ShortcutKeyDescriptor = string | MessageDescriptor;
 
 export type ShortcutDefinition = {
     default: ShortcutKeyDescriptor[];
diff --git a/webapp/channels/src/components/with_tooltip/with_tooltip_new/index.tsx b/webapp/channels/src/components/with_tooltip/with_tooltip_new/index.tsx
deleted file mode 100644
index 8db8fa98c0..0000000000
--- a/webapp/channels/src/components/with_tooltip/with_tooltip_new/index.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import type {Placement} from '@floating-ui/react';
-import {
-    useFloating,
-    autoUpdate,
-    offset,
-    useHover,
-    useFocus,
-    useDismiss,
-    useRole,
-    useInteractions,
-    arrow,
-    FloatingPortal,
-    useTransitionStyles,
-    FloatingArrow,
-    flip,
-} from '@floating-ui/react';
-import React, {useRef, useState, memo, useMemo, cloneElement, isValidElement} from 'react';
-import type {ReactNode} from 'react';
-import type {MessageDescriptor} from 'react-intl';
-import {defineMessage} from 'react-intl';
-
-import {Constants} from 'utils/constants';
-
-import TooltipContent from './tooltip_content';
-import type {ShortcutDefinition} from './tooltip_shortcut';
-
-import './tooltip.scss';
-
-const ARROW_WIDTH = 10; // in px
-const ARROW_HEIGHT = 6; // in px
-const ARROW_OFFSET = 8; // in px
-
-const TOOLTIP_REST_TIME_BEFORE_OPEN = 400; // in ms
-const TOOLTIP_APPEAR_DURATION = 250; // in ms
-const TOOLTIP_DISAPPEAR_DURATION = 200; // in ms
-
-export const ShortcutKeys = {
-    alt: defineMessage({
-        id: 'shortcuts.generic.alt',
-        defaultMessage: 'Alt',
-    }),
-    cmd: '⌘',
-    ctrl: defineMessage({
-        id: 'shortcuts.generic.ctrl',
-        defaultMessage: 'Ctrl',
-    }),
-    option: '⌥',
-    shift: defineMessage({
-        id: 'shortcuts.generic.shift',
-        defaultMessage: 'Shift',
-    }),
-};
-
-interface Props {
-    title: string | ReactNode | MessageDescriptor;
-    emoji?: string;
-    isEmojiLarge?: boolean;
-    hint?: string;
-    shortcut?: ShortcutDefinition;
-
-    /**
-     * Whether the tooltip should be vertical or horizontal, by default it is vertical
-     * This doesn't always guarantee the tooltip will be vertical, it just determines the initial placement and fallback placements
-    */
-    isVertical?: boolean;
-
-    /**
-    * @deprecated Do not use this except for special cases
-    * Callback when the tooltip appears
-   */
-    onOpen?: () => void;
-    children: ReactNode;
-}
-
-function WithTooltip({
-    children,
-    title,
-    emoji,
-    isEmojiLarge = false,
-    hint,
-    shortcut,
-    isVertical = true,
-    onOpen,
-}: Props) {
-    const [open, setOpen] = useState(false);
-
-    const arrowRef = useRef(null);
-
-    function handleChange(open: boolean) {
-        setOpen(open);
-
-        if (onOpen && open) {
-            onOpen();
-        }
-    }
-
-    const placements = useMemo<{initial: Placement; fallback: Placement[]}>(() => {
-        let initial: Placement;
-        let fallback: Placement[];
-        if (isVertical) {
-            initial = 'top';
-            fallback = ['bottom', 'right', 'left'];
-        } else {
-            initial = 'right';
-            fallback = ['left', 'top', 'bottom'];
-        }
-        return {initial, fallback};
-    }, [isVertical]);
-
-    const {refs: {setReference, setFloating}, floatingStyles, context} = useFloating({
-        open,
-        onOpenChange: handleChange,
-        whileElementsMounted: autoUpdate,
-        placement: placements.initial,
-        middleware: [
-            offset(ARROW_OFFSET),
-            flip({
-                fallbackPlacements: placements.fallback,
-            }),
-            arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-
-    const hover = useHover(context, {
-        restMs: TOOLTIP_REST_TIME_BEFORE_OPEN,
-        delay: {
-            open: Constants.OVERLAY_TIME_DELAY,
-        },
-    });
-    const focus = useFocus(context);
-    const dismiss = useDismiss(context);
-    const role = useRole(context, {role: 'tooltip'});
-
-    const {getReferenceProps, getFloatingProps} = useInteractions([hover, focus, dismiss, role]);
-    const {isMounted, styles: transitionStyles} = useTransitionStyles(context, {
-        duration: {
-            open: TOOLTIP_APPEAR_DURATION,
-            close: TOOLTIP_DISAPPEAR_DURATION,
-        },
-        initial: {
-            opacity: 0,
-        },
-        common: {
-            opacity: 1,
-        },
-    });
-
-    if (!isValidElement(children)) {
-        // eslint-disable-next-line no-console
-        console.error('Children must be a valid React element for WithTooltip');
-        return null;
-    }
-
-    const trigger = cloneElement(children, {
-        ...getReferenceProps({
-            ref: setReference,
-            ...children.props,
-        }),
-    });
-
-    return (
-        <>
-            {trigger}
-            {isMounted && (
-                <FloatingPortal
-                    id='root-portal' // This is the global portal container id
-                >
-                    <div
-                        className='tooltipContainer'
-                        ref={setFloating}
-                        style={floatingStyles}
-                        {...getFloatingProps()}
-                    >
-                        <div
-                            className='tooltipContentContainer'
-                            style={transitionStyles}
-                        >
-                            <TooltipContent
-                                title={title}
-                                emoji={emoji}
-                                isEmojiLarge={isEmojiLarge}
-                                hint={hint}
-                                shortcut={shortcut}
-                            />
-                            <FloatingArrow
-                                ref={arrowRef}
-                                context={context}
-                                width={ARROW_WIDTH}
-                                height={ARROW_HEIGHT}
-                            />
-                        </div>
-                    </div>
-                </FloatingPortal>
-            )}
-        </>
-    );
-}
-
-export default memo(WithTooltip);
diff --git a/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx b/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
index e724d84ff7..28dfac9350 100644
--- a/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
+++ b/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
@@ -329,8 +329,6 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
                         dropdownOpen={this.state.dropdownOpen}
                     >
                         <WithTooltip
-                            id='removeIcon'
-                            placement='bottom'
                             title={
                                 <FormattedMessage
                                     id='generic_icons.plugins'
diff --git a/webapp/platform/eslint-plugin/configs/.eslintrc.json b/webapp/platform/eslint-plugin/configs/.eslintrc.json
index dfce6adb01..5413ca828e 100644
--- a/webapp/platform/eslint-plugin/configs/.eslintrc.json
+++ b/webapp/platform/eslint-plugin/configs/.eslintrc.json
@@ -381,11 +381,6 @@
           }
         ],
         "paths": [
-          {
-            "name": "react-bootstrap",
-            "importNames": ["OverlayTrigger"],
-            "message": "Use OverlayTrigger from '/components/overlay_trigger' instead."
-          },
           {
             "name": "redux",
             "importNames": ["DeepPartial"],