remove individual popover components

invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx

@@ -15,11 +15,11 @@ import {
 import { ReactNode } from 'react';
 import { useAppSelector } from '../../app/store/storeHooks';
 import { systemSelector } from '../../features/system/store/systemSelectors';
+import { useTranslation } from 'react-i18next';
 
 interface Props extends PopoverProps {
-  heading?: string;
+  details: string;
-  paragraph: string;
+  children: ReactNode;
-  triggerComponent: ReactNode;
   image?: string;
   buttonLabel?: string;
   buttonHref?: string;
@@ -27,18 +27,21 @@ interface Props extends PopoverProps {
 }
 
 function IAIInformationalPopover({
-  heading,
+  details,
-  paragraph,
   image,
   buttonLabel,
   buttonHref,
-  triggerComponent,
+  children,
   placement,
 }: Props) {
   const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
+  const { t } = useTranslation();
+
+  const heading = t(`popovers.${details}.heading`);
+  const paragraph = t(`popovers.${details}.paragraph`);
 
   if (shouldDisableInformationalPopovers) {
-    return triggerComponent;
+    return children;
   } else {
     return (
       <Popover
@@ -48,7 +51,7 @@ function IAIInformationalPopover({
         variant="informational"
       >
         <PopoverTrigger>
-          <div>{triggerComponent}</div>
+          <div>{children}</div>
         </PopoverTrigger>
         <PopoverContent>
           <PopoverArrow />

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx

@@ -10,12 +10,12 @@ import {
   Tooltip,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import {
   ControlNetConfig,
   controlNetBeginStepPctChanged,
   controlNetEndStepPctChanged,
 } from 'features/controlNet/store/controlNetSlice';
-import { ControlNetBeginEndPopover } from 'features/informationalPopovers/components/controlNetBeginEnd';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -50,7 +50,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
   );
 
   return (
-    <ControlNetBeginEndPopover>
+    <IAIInformationalPopover details="controlNetBeginEnd">
       <FormControl isDisabled={!isEnabled}>
         <FormLabel>{t('controlnet.beginEndStepPercent')}</FormLabel>
         <HStack w="100%" gap={2} alignItems="center">
@@ -64,22 +64,6 @@ const ParamControlNetBeginEnd = (props: Props) => {
             minStepsBetweenThumbs={5}
             isDisabled={!isEnabled}
           >
-            <RangeSliderTrack>
-              <RangeSliderFilledTrack />
-            </RangeSliderTrack>
-            <Tooltip label={formatPct(beginStepPct)} placement="top" hasArrow>
-              <RangeSliderThumb index={0} />
-            </Tooltip>
-            <Tooltip label={formatPct(endStepPct)} placement="top" hasArrow>
-              <RangeSliderThumb index={1} />
-            </Tooltip>
-            <RangeSliderMark
-              value={0}
-              sx={{
-                insetInlineStart: '0 !important',
-                insetInlineEnd: 'unset !important',
-              }}
-            >
             <RangeSliderTrack>
               <RangeSliderFilledTrack />
             </RangeSliderTrack>
@@ -119,7 +103,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
           </RangeSlider>
         </HStack>
       </FormControl>
-    </ControlNetBeginEndPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx

@@ -1,11 +1,11 @@
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   ControlModes,
   ControlNetConfig,
   controlNetControlModeChanged,
 } from 'features/controlNet/store/controlNetSlice';
-import { ControlNetControlModePopover } from 'features/informationalPopovers/components/controlNetControlMode';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,7 +35,7 @@ export default function ParamControlNetControlMode(
   );
 
   return (
-    <ControlNetControlModePopover>
+    <IAIInformationalPopover details="controlNetControlMode">
       <IAIMantineSelect
         disabled={!isEnabled}
         label={t('controlnet.controlMode')}
@@ -43,6 +43,6 @@ export default function ParamControlNetControlMode(
         value={String(controlMode)}
         onChange={handleControlModeChange}
       />
-    </ControlNetControlModePopover>
+    </IAIInformationalPopover>
   );
 }

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx

@@ -2,9 +2,9 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISwitch from 'common/components/IAISwitch';
 import { isControlNetEnabledToggled } from 'features/controlNet/store/controlNetSlice';
-import { ControlNetTogglePopover } from 'features/informationalPopovers/components/controlnetToggle';
 import { memo, useCallback } from 'react';
 
 const selector = createSelector(
@@ -26,7 +26,7 @@ const ParamControlNetFeatureToggle = () => {
   }, [dispatch]);
 
   return (
-    <ControlNetTogglePopover>
+    <IAIInformationalPopover details="controlNetToggle">
       <IAISwitch
         label="Enable ControlNet"
         isChecked={isEnabled}
@@ -35,7 +35,7 @@ const ParamControlNetFeatureToggle = () => {
           width: '100%',
         }}
       />
-    </ControlNetTogglePopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx

@@ -1,11 +1,11 @@
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   ControlNetConfig,
   ResizeModes,
   controlNetResizeModeChanged,
 } from 'features/controlNet/store/controlNetSlice';
-import { ControlNetResizeModePopover } from 'features/informationalPopovers/components/controlNetResizeMode';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -34,7 +34,7 @@ export default function ParamControlNetResizeMode(
   );
 
   return (
-    <ControlNetResizeModePopover>
+    <IAIInformationalPopover details="controlNetResizeMode">
       <IAIMantineSelect
         disabled={!isEnabled}
         label={t('controlnet.resizeMode')}
@@ -42,6 +42,6 @@ export default function ParamControlNetResizeMode(
         value={String(resizeMode)}
         onChange={handleResizeModeChange}
       />
-    </ControlNetResizeModePopover>
+    </IAIInformationalPopover>
   );
 }

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx

@@ -1,10 +1,10 @@
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import {
   ControlNetConfig,
   controlNetWeightChanged,
 } from 'features/controlNet/store/controlNetSlice';
-import { ControlNetWeightPopover } from 'features/informationalPopovers/components/controlNetWeight';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -24,7 +24,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
   );
 
   return (
-    <ControlNetWeightPopover>
+    <IAIInformationalPopover details="controlNetWeight">
       <IAISlider
         isDisabled={!isEnabled}
         label={t('controlnet.weight')}
@@ -36,7 +36,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
         withSliderMarks
         sliderMarks={[0, 1, 2]}
       />
-    </ControlNetWeightPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx

@@ -5,8 +5,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
 import { memo, useCallback } from 'react';
 import { combinatorialToggled } from '../store/dynamicPromptsSlice';
-import { DynamicPromptsCombinatorialPopover } from 'features/informationalPopovers/components/dynamicPromptsCombinatorial';
 import { useTranslation } from 'react-i18next';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   stateSelector,
@@ -28,14 +28,14 @@ const ParamDynamicPromptsCombinatorial = () => {
   }, [dispatch]);
 
   return (
-    <DynamicPromptsCombinatorialPopover>
+    <IAIInformationalPopover details="dynamicPromptsCombinatorial">
       <IAISwitch
         isDisabled={isDisabled}
         label={t('prompt.combinatorial')}
         isChecked={combinatorial}
         onChange={handleChange}
       />
-    </DynamicPromptsCombinatorialPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsEnabled.tsx

@@ -5,8 +5,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
 import { memo, useCallback } from 'react';
 import { isEnabledToggled } from '../store/dynamicPromptsSlice';
-import { DynamicPromptsTogglePopover } from 'features/informationalPopovers/components/dynamicPromptsToggle';
 import { useTranslation } from 'react-i18next';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   stateSelector,
@@ -28,14 +28,13 @@ const ParamDynamicPromptsToggle = () => {
   }, [dispatch]);
 
   return (
-    <DynamicPromptsTogglePopover>
+    <IAIInformationalPopover details="dynamicPromptsToggle">
       <IAISwitch
         label={t('prompt.enableDynamicPrompts')}
         isChecked={isEnabled}
         onChange={handleToggleIsEnabled}
       />
-    </DynamicPromptsTogglePopover>
+    </IAIInformationalPopover>
-
   );
 };
 

invokeai/frontend/web/src/features/informationalPopovers/components/clipSkip.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ClipSkipPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.clipSkip.paragraph')}
-      heading={t('popovers.clipSkip.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlur.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingBlurPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingBlur.paragraph')}
-      heading={t('popovers.compositingBlur.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlurMethod.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingBlurMethodPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingBlurMethod.paragraph')}
-      heading={t('popovers.compositingBlurMethod.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositingCoherencePass.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingCoherencePassPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingCoherencePass.paragraph')}
-      heading={t('popovers.compositingCoherencePass.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositingMode.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingModePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingMode.paragraph')}
-      heading={t('popovers.compositingMode.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositingSteps.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingStepsPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingSteps.paragraph')}
-      heading={t('popovers.compositingSteps.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositingStrength.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingStrengthPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingStrength.paragraph')}
-      heading={t('popovers.compositingStrength.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/compositiveMaskAdjustments.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const CompositingMaskAdjustmentsPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.compositingMaskAdjustments.paragraph')}
-      heading={t('popovers.compositingMaskAdjustments.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/controlNetBeginEnd.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ControlNetBeginEndPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.controlNetBeginEnd.paragraph')}
-      heading={t('popovers.controlNetBeginEnd.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/controlNetControlMode.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ControlNetControlModePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.controlNetControlMode.paragraph')}
-      heading={t('popovers.controlNetControlMode.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/controlNetResizeMode.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ControlNetResizeModePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.controlNetResizeMode.paragraph')}
-      heading={t('popovers.controlNetResizeMode.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/controlNetToggle.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ControlNetTogglePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.controlNetToggle.paragraph')}
-      heading={t('popovers.controlNetToggle.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/controlNetWeight.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ControlNetWeightPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.controlNetWeight.paragraph')}
-      heading={t('popovers.controlNetWeight.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsCombinatorial.tsx

@@ -1,17 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const DynamicPromptsCombinatorialPopover = (
-  props: PropsWithChildren
-) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.dynamicPromptsCombinatorial.paragraph')}
-      heading={t('popovers.dynamicPromptsCombinatorial.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsToggle.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const DynamicPromptsTogglePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.dynamicPromptsToggle.paragraph')}
-      heading={t('popovers.dynamicPromptsToggle.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/infillMethod.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const InfillMethodPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.infillMethod.paragraph')}
-      heading={t('popovers.infillMethod.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/lora.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const LoraPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.lora.paragraph')}
-      heading={t('popovers.lora.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/noiseEnable.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const NoiseEnablePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.noiseEnable.paragraph')}
-      heading={t('popovers.noiseEnable.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/noiseUseCPU.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const NoiseUseCPUPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.noiseUseCPU.paragraph')}
-      heading={t('popovers.noiseUseCPU.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramCFGScale.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamCFGScalePopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramsCFGScale.paragraph')}
-      heading={t('popovers.paramsCFGScale.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramDenoisingStrength.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamDenoisingStrengthPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramsDenoisingStrength.paragraph')}
-      heading={t('popovers.paramsDenoisingStrength.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramImages.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamImagesPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramImages.paragraph')}
-      heading={t('popovers.paramImages.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramModel.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamModelPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramModel.paragraph')}
-      heading={t('popovers.paramModel.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx

@@ -1,19 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import InvokeAILogoImage from 'assets/images/logo.png';
-import { useTranslation } from 'react-i18next';
-
-export const ParamPositiveConditioningPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramPositiveConditioning.paragraph')}
-      heading={t('popovers.paramPositiveConditioning.heading')}
-      buttonLabel="Learn more"
-      buttonHref="http://google.com"
-      image={InvokeAILogoImage}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramScheduler.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamSchedulerPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramScheduler.paragraph')}
-      heading={t('popovers.paramScheduler.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramSeed.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamSeedPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramSeed.paragraph')}
-      heading={t('popovers.paramSeed.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramSteps.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamStepsPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramSteps.paragraph')}
-      heading={t('popovers.paramSteps.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramVAE.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamVAEPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramVAE.paragraph')}
-      heading={t('popovers.paramVAE.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/paramVAEPrecision.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ParamVAEPrecisionPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.paramVAEPrecision.paragraph')}
-      heading={t('popovers.paramVAEPrecision.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/informationalPopovers/components/scaleBeforeProcessing.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
-import { useTranslation } from 'react-i18next';
-
-export const ScaleBeforeProcessingPopover = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
-
-  return (
-    <IAIInformationalPopover
-      paragraph={t('popovers.scaleBeforeProcessing.paragraph')}
-      heading={t('popovers.scaleBeforeProcessing.heading')}
-      triggerComponent={props.children}
-    />
-  );
-};

invokeai/frontend/web/src/features/lora/components/ParamLora.tsx

@@ -10,7 +10,7 @@ import {
   loraWeightChanged,
   loraWeightReset,
 } from '../store/loraSlice';
-import { LoraPopover } from 'features/informationalPopovers/components/lora';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 type Props = {
   lora: LoRA;
@@ -36,7 +36,7 @@ const ParamLora = (props: Props) => {
   }, [dispatch, lora.id]);
 
   return (
-    <LoraPopover>
+    <IAIInformationalPopover details="lora">
       <Flex sx={{ gap: 2.5, alignItems: 'flex-end' }}>
         <IAISlider
           label={lora.model_name}
@@ -61,7 +61,7 @@ const ParamLora = (props: Props) => {
           colorScheme="error"
         />
       </Flex>
-    </LoraPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClipSkip.tsx

@@ -1,7 +1,7 @@
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { ClipSkipPopover } from 'features/informationalPopovers/components/clipSkip';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
 import { clipSkipMap } from 'features/parameters/types/constants';
 import { useCallback, useMemo } from 'react';
@@ -43,7 +43,7 @@ export default function ParamClipSkip() {
   }, [model]);
 
   return (
-    <ClipSkipPopover>
+    <IAIInformationalPopover details="clipSkip">
       <IAISlider
         label={t('parameters.clipSkip')}
         aria-label={t('parameters.clipSkip')}
@@ -58,6 +58,6 @@ export default function ParamClipSkip() {
         withReset
         handleReset={handleClipSkipReset}
       />
-    </ClipSkipPopover>
+    </IAIInformationalPopover>
   );
 }

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx

@@ -1,8 +1,8 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import { IAISelectDataType } from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { CompositingModePopover } from 'features/informationalPopovers/components/compositingMode';
 import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
 import { CanvasCoherenceModeParam } from 'features/parameters/types/parameterSchemas';
 
@@ -31,14 +31,14 @@ const ParamCanvasCoherenceMode = () => {
   };
 
   return (
-    <CompositingModePopover>
+    <IAIInformationalPopover details="compositingCoherenceMode">
       <IAIMantineSelect
         label={t('parameters.coherenceMode')}
         data={coherenceModeSelectData}
         value={canvasCoherenceMode}
         onChange={handleCoherenceModeChange}
       />
-    </CompositingModePopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx

@@ -1,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { CompositingStepsPopover } from 'features/informationalPopovers/components/compositingSteps';
 import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ const ParamCanvasCoherenceSteps = () => {
   const { t } = useTranslation();
 
   return (
-    <CompositingStepsPopover>
+    <IAIInformationalPopover details="compositingCoherenceSteps">
       <IAISlider
         label={t('parameters.coherenceSteps')}
         min={1}
@@ -32,7 +32,7 @@ const ParamCanvasCoherenceSteps = () => {
           dispatch(setCanvasCoherenceSteps(20));
         }}
       />
-    </CompositingStepsPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx

@@ -1,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { CompositingStrengthPopover } from 'features/informationalPopovers/components/compositingStrength';
 import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ const ParamCanvasCoherenceStrength = () => {
   const { t } = useTranslation();
 
   return (
-    <CompositingStrengthPopover>
+    <IAIInformationalPopover details="compositingStrength">
       <IAISlider
         label={t('parameters.coherenceStrength')}
         min={0}
@@ -32,7 +32,7 @@ const ParamCanvasCoherenceStrength = () => {
           dispatch(setCanvasCoherenceStrength(0.3));
         }}
       />
-    </CompositingStrengthPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx

@@ -1,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { CompositingBlurPopover } from 'features/informationalPopovers/components/compositingBlur';
 import { setMaskBlur } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,7 @@ export default function ParamMaskBlur() {
   const { t } = useTranslation();
 
   return (
-    <CompositingBlurPopover>
+    <IAIInformationalPopover details="compositingBlur">
       <IAISlider
         label={t('parameters.maskBlur')}
         min={0}
@@ -30,6 +30,6 @@ export default function ParamMaskBlur() {
           dispatch(setMaskBlur(16));
         }}
       />
-    </CompositingBlurPopover>
+    </IAIInformationalPopover>
   );
 }

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx

@@ -2,8 +2,8 @@ import { SelectItem } from '@mantine/core';
 import { RootState } from 'app/store/store';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { CompositingBlurMethodPopover } from 'features/informationalPopovers/components/compositingBlurMethod';
 import { setMaskBlurMethod } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
 
@@ -29,13 +29,13 @@ export default function ParamMaskBlurMethod() {
   };
 
   return (
-    <CompositingBlurMethodPopover>
+    <IAIInformationalPopover details="compositingBlur">
       <IAIMantineSelect
         value={maskBlurMethod}
         onChange={handleMaskBlurMethodChange}
         label={t('parameters.maskBlurMethod')}
         data={maskBlurMethods}
       />
-    </CompositingBlurMethodPopover>
+    </IAIInformationalPopover>
   );
 }

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx

@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { InfillMethodPopover } from 'features/informationalPopovers/components/infillMethod';
 import { setInfillMethod } from 'features/parameters/store/generationSlice';
 
 import { memo, useCallback } from 'react';
@@ -40,7 +40,7 @@ const ParamInfillMethod = () => {
   );
 
   return (
-    <InfillMethodPopover>
+    <IAIInformationalPopover details="infillMethod">
       <IAIMantineSelect
         disabled={infill_methods?.length === 0}
         placeholder={isLoading ? 'Loading...' : undefined}
@@ -49,7 +49,7 @@ const ParamInfillMethod = () => {
         data={infill_methods ?? []}
         onChange={handleChange}
       />
-    </InfillMethodPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx

@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
@@ -8,7 +9,6 @@ import {
   BOUNDING_BOX_SCALES_DICT,
   BoundingBoxScale,
 } from 'features/canvas/store/canvasTypes';
-import { ScaleBeforeProcessingPopover } from 'features/informationalPopovers/components/scaleBeforeProcessing';
 
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -36,14 +36,14 @@ const ParamScaleBeforeProcessing = () => {
   };
 
   return (
-    <ScaleBeforeProcessingPopover>
+    <IAIInformationalPopover details="scaleBeforeProcessing">
       <IAIMantineSearchableSelect
         label={t('parameters.scaleBeforeProcessing')}
         data={BOUNDING_BOX_SCALES_DICT}
         value={boundingBoxScale}
         onChange={handleChangeBoundingBoxScaleMethod}
       />
-    </ScaleBeforeProcessingPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx

@@ -2,9 +2,9 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
-import { ParamCFGScalePopover } from 'features/informationalPopovers/components/paramCFGScale';
 import { setCfgScale } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -54,7 +54,7 @@ const ParamCFGScale = () => {
   );
 
   return shouldUseSliders ? (
-    <ParamCFGScalePopover>
+    <IAIInformationalPopover details="paramCFGScale">
       <IAISlider
         label={t('parameters.cfgScale')}
         step={shift ? 0.1 : 0.5}
@@ -69,9 +69,9 @@ const ParamCFGScale = () => {
         withSliderMarks
         isInteger={false}
       />
-    </ParamCFGScalePopover>
+    </IAIInformationalPopover>
   ) : (
-    <ParamCFGScalePopover>
+    <IAIInformationalPopover details="paramCFGScale">
       <IAINumberInput
         label={t('parameters.cfgScale')}
         step={0.5}
@@ -82,7 +82,7 @@ const ParamCFGScale = () => {
         isInteger={false}
         numberInputFieldProps={{ textAlign: 'center' }}
       />
-    </ParamCFGScalePopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
 import { ParamImagesPopover } from 'features/informationalPopovers/components/paramImages';
@@ -61,7 +62,7 @@ const ParamIterations = () => {
   }, [dispatch, initial]);
 
   return shouldUseSliders ? (
-    <ParamImagesPopover>
+    <IAIInformationalPopover details="paramImages">
       <IAISlider
         isDisabled={isDisabled}
         label={t('parameters.images')}
@@ -76,9 +77,9 @@ const ParamIterations = () => {
         withSliderMarks
         sliderNumberInputProps={{ max: inputMax }}
       />
-    </ParamImagesPopover>
+    </IAIInformationalPopover>
   ) : (
-    <ParamImagesPopover>
+    <IAIInformationalPopover details="paramImages">
       <IAINumberInput
         isDisabled={isDisabled}
         label={t('parameters.images')}
@@ -89,7 +90,7 @@ const ParamIterations = () => {
         value={iterations}
         numberInputFieldProps={{ textAlign: 'center' }}
       />
-    </ParamImagesPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

@@ -29,7 +29,6 @@ import { useTranslation } from 'react-i18next';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
 import IAIInformationalPopover from '../../../../../common/components/IAIInformationalPopover';
 import InvokeAILogoImage from 'assets/images/logo.png';
-import { ParamPositiveConditioningPopover } from '../../../../informationalPopovers/components/paramPositiveConditioning';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
@@ -139,7 +138,7 @@ const ParamPositiveConditioning = () => {
           onClose={onClose}
           onSelect={handleSelectEmbedding}
         >
-          <ParamPositiveConditioningPopover>
+          <IAIInformationalPopover details="paramPositiveConditioning">
             <IAITextarea
               id="prompt"
               name="prompt"
@@ -151,7 +150,7 @@ const ParamPositiveConditioning = () => {
               resize="vertical"
               minH={32}
             />
-          </ParamPositiveConditioningPopover>
+          </IAIInformationalPopover>
         </ParamEmbeddingPopover>
       </FormControl>
       {!isOpen && isEmbeddingEnabled && (

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx

@@ -1,8 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
-import { ParamSchedulerPopover } from 'features/informationalPopovers/components/paramScheduler';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
 import {
@@ -52,14 +52,14 @@ const ParamScheduler = () => {
   );
 
   return (
-    <ParamSchedulerPopover>
+    <IAIInformationalPopover details="paramScheduler">
       <IAIMantineSearchableSelect
         label={t('parameters.scheduler')}
         value={scheduler}
         data={data}
         onChange={handleChange}
       />
-    </ParamSchedulerPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx

@@ -2,10 +2,10 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 
 import IAISlider from 'common/components/IAISlider';
-import { ParamStepsPopover } from 'features/informationalPopovers/components/paramSteps';
 import {
   clampSymmetrySteps,
   setSteps,
@@ -57,7 +57,7 @@ const ParamSteps = () => {
   }, [dispatch]);
 
   return shouldUseSliders ? (
-    <ParamStepsPopover>
+    <IAIInformationalPopover details="paramSteps">
       <IAISlider
         label={t('parameters.steps')}
         min={min}
@@ -71,9 +71,9 @@ const ParamSteps = () => {
         withSliderMarks
         sliderNumberInputProps={{ max: inputMax }}
       />
-    </ParamStepsPopover>
+    </IAIInformationalPopover>
   ) : (
-    <ParamStepsPopover>
+    <IAIInformationalPopover details="paramSteps">
       <IAINumberInput
         label={t('parameters.steps')}
         min={min}
@@ -84,7 +84,7 @@ const ParamSteps = () => {
         numberInputFieldProps={{ textAlign: 'center' }}
         onBlur={handleBlur}
       />
-    </ParamStepsPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx

@@ -7,6 +7,7 @@ import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import SubParametersWrapper from '../SubParametersWrapper';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   [stateSelector],
@@ -46,20 +47,22 @@ const ImageToImageStrength = () => {
 
   return (
     <SubParametersWrapper>
-      <IAISlider
+      <IAIInformationalPopover details="paramDenoisingStrength">
-        label={`${t('parameters.denoisingStrength')}`}
+        <IAISlider
-        step={step}
+          label={`${t('parameters.denoisingStrength')}`}
-        min={min}
+          step={step}
-        max={sliderMax}
+          min={min}
-        onChange={handleChange}
+          max={sliderMax}
-        handleReset={handleReset}
+          onChange={handleChange}
-        value={img2imgStrength}
+          handleReset={handleReset}
-        isInteger={false}
+          value={img2imgStrength}
-        withInput
+          isInteger={false}
-        withSliderMarks
+          withInput
-        withReset
+          withSliderMarks
-        sliderNumberInputProps={{ max: inputMax }}
+          withReset
-      />
+          sliderNumberInputProps={{ max: inputMax }}
+        />
+      </IAIInformationalPopover>
     </SubParametersWrapper>
   );
 };

invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx

@@ -21,7 +21,7 @@ import {
   useGetOnnxModelsQuery,
 } from 'services/api/endpoints/models';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
-import { ParamModelPopover } from 'features/informationalPopovers/components/paramModel';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   stateSelector,
@@ -119,7 +119,7 @@ const ParamMainModelSelect = () => {
       data={[]}
     />
   ) : (
-    <ParamModelPopover>
+    <IAIInformationalPopover details="paramModel" placement="bottom">
       <Flex w="100%" alignItems="center" gap={3}>
         <IAIMantineSearchableSelect
           tooltip={selectedModel?.description}
@@ -140,7 +140,7 @@ const ParamMainModelSelect = () => {
           </Box>
         )}
       </Flex>
-    </ParamModelPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx

@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISwitch from 'common/components/IAISwitch';
-import { NoiseUseCPUPopover } from 'features/informationalPopovers/components/noiseUseCPU';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,13 +29,13 @@ export const ParamCpuNoiseToggle = () => {
     dispatch(shouldUseCpuNoiseChanged(e.target.checked));
 
   return (
-    <NoiseUseCPUPopover>
+    <IAIInformationalPopover details="noiseUseCPU">
       <IAISwitch
         isDisabled={isDisabled}
         label={t('parameters.useCpuNoise')}
         isChecked={shouldUseCpuNoise}
         onChange={handleChange}
       />
-    </NoiseUseCPUPopover>
+    </IAIInformationalPopover>
   );
 };

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx

@@ -1,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISwitch from 'common/components/IAISwitch';
-import { NoiseEnablePopover } from 'features/informationalPopovers/components/noiseEnable';
 import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,12 +18,12 @@ export const ParamNoiseToggle = () => {
     dispatch(setShouldUseNoiseSettings(e.target.checked));
 
   return (
-    <NoiseEnablePopover>
+    <IAIInformationalPopover details="noiseEnable">
       <IAISwitch
         label={t('parameters.enableNoiseSettings')}
         isChecked={shouldUseNoiseSettings}
         onChange={handleChange}
       />
-    </NoiseEnablePopover>
+    </IAIInformationalPopover>
   );
 };

invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx

@@ -3,17 +3,17 @@ import { memo } from 'react';
 import ParamSeed from './ParamSeed';
 import ParamSeedShuffle from './ParamSeedShuffle';
 import ParamSeedRandomize from './ParamSeedRandomize';
-import { ParamSeedPopover } from 'features/informationalPopovers/components/paramSeed';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const ParamSeedFull = () => {
   return (
-    <ParamSeedPopover>
+    <IAIInformationalPopover details="paramSeed">
       <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
         <ParamSeed />
         <ParamSeedShuffle />
         <ParamSeedRandomize />
       </Flex>
-    </ParamSeedPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx

@@ -15,7 +15,7 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI
 import { vaeSelected } from 'features/parameters/store/generationSlice';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToVAEModelParam } from 'features/parameters/util/modelIdToVAEModelParam';
-import { ParamVAEPopover } from 'features/informationalPopovers/components/paramVAE';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   stateSelector,
@@ -94,7 +94,7 @@ const ParamVAEModelSelect = () => {
   );
 
   return (
-    <ParamVAEPopover>
+    <IAIInformationalPopover details="paramVAE">
       <IAIMantineSearchableSelect
         itemComponent={IAIMantineSelectItemWithTooltip}
         tooltip={selectedVaeModel?.description}
@@ -106,7 +106,7 @@ const ParamVAEModelSelect = () => {
         disabled={data.length === 0}
         clearable
       />
-    </ParamVAEPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx

@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { ParamVAEPrecisionPopover } from 'features/informationalPopovers/components/paramVAEPrecision';
 import { vaePrecisionChanged } from 'features/parameters/store/generationSlice';
 import { PrecisionParam } from 'features/parameters/types/parameterSchemas';
 import { memo, useCallback } from 'react';
@@ -35,14 +35,14 @@ const ParamVAEModelSelect = () => {
   );
 
   return (
-    <ParamVAEPrecisionPopover>
+    <IAIInformationalPopover details="paramVAEPrecision">
       <IAIMantineSelect
         label="VAE Precision"
         value={vaePrecision}
         data={DATA}
         onChange={handleChange}
       />
-    </ParamVAEPrecisionPopover>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx

@@ -7,7 +7,7 @@ import SubParametersWrapper from 'features/parameters/components/Parameters/SubP
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { setSDXLImg2ImgDenoisingStrength } from '../store/sdxlSlice';
-import { ParamDenoisingStrengthPopover } from 'features/informationalPopovers/components/paramDenoisingStrength';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   [stateSelector],
@@ -37,7 +37,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
 
   return (
     <SubParametersWrapper>
-      <ParamDenoisingStrengthPopover>
+      <IAIInformationalPopover details="paramDenoisingStrength">
         <IAISlider
           label={t('sdxl.denoisingStrength')}
           step={0.01}
@@ -51,7 +51,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
           withSliderMarks
           withReset
         />
-      </ParamDenoisingStrengthPopover>
+      </IAIInformationalPopover>
     </SubParametersWrapper>
   );
 };