From 9466b948ad9579940039fadf1d101d29d0205a6a Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Tue, 6 Aug 2024 08:32:46 +0300
Subject: [PATCH] [MM-59894] Migrate tooltips of
 'components/app_bar/app_bar_plugin_component.tsx' to WithTooltip (#27834)

---
 .../app_bar/app_bar_plugin_component.tsx      | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

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 0180405376..f88695b92a 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
@@ -3,17 +3,16 @@
 
 import classNames from 'classnames';
 import React, {useState, useEffect} from 'react';
-import {Tooltip} from 'react-bootstrap';
 import {useSelector} from 'react-redux';
 
 import {getCurrentChannel, getMyCurrentChannelMembership} from 'mattermost-redux/selectors/entities/channels';
 
 import {getActiveRhsComponent} from 'selectors/rhs';
 
-import OverlayTrigger from 'components/overlay_trigger';
 import PluginIcon from 'components/widgets/icons/plugin_icon';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {suitePluginIds} from 'utils/constants';
+import {suitePluginIds} from 'utils/constants';
 
 import type {PluginComponent, AppBarComponent} from 'types/store/plugins';
 
@@ -56,11 +55,6 @@ const AppBarPluginComponent = (props: PluginComponentProps) => {
 
     const buttonId = `app-bar-icon-${component.pluginId}`;
     const tooltipText = component.tooltipText || component.dropdownText || component.pluginId;
-    const tooltip = (
-        <Tooltip id={'pluginTooltip-' + buttonId}>
-            <span>{tooltipText}</span>
-        </Tooltip>
-    );
 
     const iconUrl = component.iconUrl;
     let content: React.ReactNode = (
@@ -101,11 +95,10 @@ const AppBarPluginComponent = (props: PluginComponentProps) => {
     const boardsEnabled = component.pluginId === suitePluginIds.focalboard;
 
     return (
-        <OverlayTrigger
-            trigger={['hover', 'focus']}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id={'pluginTooltip-' + buttonId}
+            title={tooltipText}
             placement='left'
-            overlay={tooltip}
         >
             <div
                 id={buttonId}
@@ -117,7 +110,7 @@ const AppBarPluginComponent = (props: PluginComponentProps) => {
                 {content}
                 {boardsEnabled && <NewChannelWithBoardTourTip/>}
             </div>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };