[MM-59896] Migrate tooltips of 'components/channel_members_dropdown/channel_members_dropdown.tsx' to WithTooltip (#27806)

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

@@ -84,25 +84,14 @@ exports[`components/channel_members_dropdown should match snapshot for dropdown
 <div
   className="more-modal__shared-actions"
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
+    id="sharedTooltip"
-    delayShow={400}
-    overlay={
-      <Tooltip
-        id="sharedTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="From trusted organizations"
-          id="shared_user_indicator.tooltip"
-        />
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
+    title={
-      Array [
+      <Memo(MemoizedFormattedMessage)
-        "hover",
+        defaultMessage="From trusted organizations"
-        "focus",
+        id="shared_user_indicator.tooltip"
-      ]
+      />
     }
   >
     <span>
@@ -114,7 +103,7 @@ exports[`components/channel_members_dropdown should match snapshot for dropdown
         className="shared-user-icon icon-circle-multiple-outline"
       />
     </span>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;
 

webapp/channels/src/components/channel_members_dropdown/channel_members_dropdown.tsx

@@ -12,11 +12,10 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import * as UserUtils from 'mattermost-redux/utils/user_utils';
 
 import LeaveChannelModal from 'components/leave_channel_modal';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import DropdownIcon from 'components/widgets/icons/fa_dropdown_icon';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
 import {Constants, ModalIdentifiers} from 'utils/constants';
 import * as Utils from 'utils/utils';
@@ -155,21 +154,17 @@ export default function ChannelMembersDropdown({
     const currentRole = renderRole(isChannelAdmin, isGuest);
 
     if (user.remote_id) {
-        const sharedTooltip = (
-            <Tooltip id='sharedTooltip'>
-                <FormattedMessage
-                    id='shared_user_indicator.tooltip'
-                    defaultMessage='From trusted organizations'
-                />
-            </Tooltip>
-        );
-
         return (
             <div className='more-modal__shared-actions'>
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='sharedTooltip'
                     placement='bottom'
-                    overlay={sharedTooltip}
+                    title={
+                        <FormattedMessage
+                            id='shared_user_indicator.tooltip'
+                            defaultMessage='From trusted organizations'
+                        />
+                    }
                 >
                     <span>
                         <FormattedMessage
@@ -178,7 +173,7 @@ export default function ChannelMembersDropdown({
                         />
                         <i className='shared-user-icon icon-circle-multiple-outline'/>
                     </span>
-                </OverlayTrigger>
+                </WithTooltip>
             </div>
         );
     }