[MM-59899] Migrate tooltips of 'components/setting_picture.tsx' to WithTooltip (#27821)

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

@@ -739,29 +739,15 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
               src="http://localhost:8065/api/v4/users/src_id"
             />
           </div>
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="removeIcon"
-              >
-                <div
-                  aria-hidden={true}
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Remove This Icon"
-                    id="setting_picture.remove"
-                  />
-                </div>
-              </Tooltip>
-            }
+          <WithTooltip
+            disabled={false}
+            id="removeIcon"
             placement="right"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
+            title={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove This Icon"
+                id="setting_picture.remove"
+              />
             }
           >
             <button
@@ -783,7 +769,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
                 />
               </span>
             </button>
-          </OverlayTrigger>
+          </WithTooltip>
         </div>
       </li>
       <div
@@ -908,29 +894,15 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
               src="http://localhost:8065/api/v4/users/src_id"
             />
           </div>
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="removeIcon"
-              >
-                <div
-                  aria-hidden={true}
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Remove Profile Picture"
-                    id="setting_picture.remove_profile_picture"
-                  />
-                </div>
-              </Tooltip>
-            }
+          <WithTooltip
+            disabled={false}
+            id="removeIcon"
             placement="right"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
+            title={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Remove Profile Picture"
+                id="setting_picture.remove_profile_picture"
+              />
             }
           >
             <button
@@ -952,7 +924,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
                 />
               </span>
             </button>
-          </OverlayTrigger>
+          </WithTooltip>
         </div>
       </li>
       <div

webapp/channels/src/components/setting_picture.tsx

@@ -6,14 +6,14 @@ import type {ChangeEvent, CSSProperties, MouseEvent, ReactNode, RefObject} from
 import {FormattedMessage} from 'react-intl';
 
 import FormError from 'components/form_error';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import {Constants} from 'utils/constants';
 import * as FileUtils from 'utils/file_utils';
 import {localizeMessage} from 'utils/utils';
 
+import WithTooltip from './with_tooltip';
+
 type Props = {
     clientError?: ReactNode;
     serverError?: ReactNode;
@@ -231,16 +231,11 @@ export default class SettingPicture extends Component<Props, State> {
                     >
                         {imageElement}
                     </div>
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                    <WithTooltip
+                        id='removeIcon'
+                        title={title ?? ''}
                         placement='right'
-                        overlay={(
-                            <Tooltip id='removeIcon'>
-                                <div aria-hidden={true}>
-                                    {title}
-                                </div>
-                            </Tooltip>
-                        )}
+                        disabled={!title}
                     >
                         <button
                             data-testid='removeSettingPicture'
@@ -250,7 +245,7 @@ export default class SettingPicture extends Component<Props, State> {
                             <span aria-hidden={true}>{'×'}</span>
                             <span className='sr-only'>{title}</span>
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 </div>
             );
         }