[MM-60170] Migrate tooltips of "components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx" to WithTooltip (#28009)

webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap

@@ -426,27 +426,19 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
               Monokai
             </option>
           </select>
-          <OverlayTrigger
+          <WithTooltip
-            defaultOverlayShown={false}
+            id="code-popover"
-            overlay={
+            placement="top"
-              <Memo(Popover)
+            title={
+              <div
                 className="code-popover"
-                id="code-popover"
-                popoverStyle="info"
               >
                 <img
                   alt="code theme image"
                   src=""
                   width="200"
                 />
-              </Memo(Popover)>
+              </div>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
             }
           >
             <span
@@ -457,7 +449,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
                 src=""
               />
             </span>
-          </OverlayTrigger>
+          </WithTooltip>
         </div>
       </div>
     </div>

webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx

@@ -9,9 +9,7 @@ import type {IntlShape, MessageDescriptor} from 'react-intl';
 import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 import {setThemeDefaults} from 'mattermost-redux/utils/theme_utils';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import type {BaseOverlayTrigger} from 'components/overlay_trigger';
-import Popover from 'components/widgets/popover';
 
 import Constants from 'utils/constants';
 
@@ -134,7 +132,6 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
     centerChannelStylesHeaderRef: RefObject<HTMLDivElement>;
     linkAndButtonStylesHeaderRef: RefObject<HTMLDivElement>;
     sidebarStylesRef: RefObject<HTMLDivElement>;
-    headerOverlayRef: RefObject<BaseOverlayTrigger>;
     centerChannelStylesRef: RefObject<HTMLDivElement>;
     linkAndButtonStylesRef: RefObject<HTMLDivElement>;
 
@@ -145,7 +142,6 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
         this.centerChannelStylesHeaderRef = createRef();
         this.linkAndButtonStylesHeaderRef = createRef();
         this.sidebarStylesRef = createRef();
-        this.headerOverlayRef = createRef();
         this.centerChannelStylesRef = createRef();
         this.linkAndButtonStylesRef = createRef();
 
@@ -311,20 +307,6 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
                     );
                 });
 
-                const popoverContent = (
-                    <Popover
-                        popoverStyle='info'
-                        id='code-popover'
-                        className='code-popover'
-                    >
-                        <img
-                            width='200'
-                            alt={'code theme image'}
-                            src={codeThemeURL}
-                        />
-                    </Popover>
-                );
-
                 centerChannelElements.push(
                     <div
                         className='col-sm-6 form-group'
@@ -345,10 +327,18 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
                             >
                                 {codeThemeOptions}
                             </select>
-                            <OverlayTrigger
+                            <WithTooltip
                                 placement='top'
-                                overlay={popoverContent}
+                                id='code-popover'
-                                ref={this.headerOverlayRef}
+                                title={
+                                    <div className='code-popover'>
+                                        <img
+                                            width='200'
+                                            alt={'code theme image'}
+                                            src={codeThemeURL}
+                                        />
+                                    </div>
+                                }
                             >
                                 <span className='input-group-addon'>
                                     <img
@@ -356,7 +346,7 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
                                         src={codeThemeURL}
                                     />
                                 </span>
-                            </OverlayTrigger>
+                            </WithTooltip>
                         </div>
                     </div>,
                 );