added optional popovers for users to learn more about each setting

invokeai/frontend/web/public/locales/en.json

@@ -653,6 +653,132 @@
             "infillAndScaling": "Manage infill methods (used on masked or erased areas of the canvas) and scaling (useful for small bounding box sizes)."
         }
     },
+    "popovers": {
+        "clipSkip": {
+            "heading": "CLIP Skip",
+            "paragraph": "Choose how many layers of the CLIP model to skip. Certain models are better suited to be used with CLIP Skip."
+        },
+        "compositingBlur": {
+            "heading": "Blur",
+            "paragraph": "The blur radius of the mask."
+        },
+        "compositingBlurMethod": {
+            "heading": "Blur Method",
+            "paragraph": "The method of blur applied to the masked area."
+        },
+        "compositingCoherencePass": {
+            "heading": "Coherence Pass",
+            "paragraph": "Composite the Inpainted/Outpainted images."
+        },
+        "compositingMode": {
+            "heading": "Mode",
+            "paragraph": "The mode of the Coherence Pass."
+        },
+        "compositingSteps": {
+            "heading": "Steps",
+            "paragraph": "Number of steps in the Coherence Pass. Similar to Denoising Steps."
+        },
+        "compositingStrength": {
+            "heading": "Strength",
+            "paragraph": "Amount of noise added for the Coherence Pass. Similar to Denoising Strength."
+        },
+        "compositingMaskAdjustments": {
+            "heading": "Mask Adjustments",
+            "paragraph": "Adjust the mask."
+        },
+        "controlNetBeginEnd": {
+            "heading": "Begin / End Step Percentage",
+            "paragraph": "Which parts of the denoising process will have the ControlNet applied. ControlNets applied at the start of the process guide composition, and ControlNets applied at the end guide details."
+        },
+        "controlNetControlMode": {
+            "heading": "Control Mode",
+            "paragraph": "Lends more weight to either the prompt or ControlNet."
+        },
+        "controlNetResizeMode": {
+            "heading": "Resize Mode",
+            "paragraph": "How the ControlNet image will be fit to the image generation Ratio"
+        },
+        "controlNetToggle": {
+            "heading": "Enable ControlNet",
+            "paragraph": "ControlNets provide guidance to the generation process, helping create images with controlled composition, structure, or style, depending on the model selected."
+        },
+        "controlNetWeight": {
+            "heading": "Weight",
+            "paragraph": "How strongly the ControlNet will impact the generated image."
+        },
+        "dynamicPromptsToggle": {
+            "heading": "Enable Dynamic Prompts",
+            "paragraph": "Dynamic prompts allow multiple options within a prompt. Dynamic prompts can be used by: {option1|option2|option3}. Combinations of prompts will be randomly generated until the “Images” number has been reached."
+        },
+        "dynamicPromptsCombinatorial": {
+            "heading": "Combinatorial Generation",
+            "paragraph": "Generate an image for every possible combination of Dynamic Prompt until the Max Prompts is reached."
+        },
+        "infillMethod": {
+            "heading": "Infill Method",
+            "paragraph": "Method to infill the selected area."
+        },
+        "lora": {
+            "heading": "LoRA",
+            "paragraph": "Weight of the LoRA. Higher weight will lead to larger impacts on the final image."
+        },
+        "noiseEnable": {
+            "heading": "Enable Noise Settings",
+            "paragraph": "Advanced control over noise generation."
+        },
+        "noiseUseCPU": {
+            "heading": "Use CPU Noise",
+            "paragraph": "Uses the CPU to generate random noise."
+        },
+        "paramsCFGScale": {
+            "heading": "CFG Scale",
+            "paragraph": "Controls how much your prompt influences the generation process."
+        },
+        "paramDenoisingStrength": {
+            "heading": "Denoising Strength",
+            "paragraph": "How much noise is added to the input image. 0 will result in an identical image, while 1 will result in a completely new image."
+        },
+        "paramImages": {
+            "heading": "Images",
+            "paragraph": "Number of images that will be generated."
+        },
+        "paramModel": {
+            "heading": "Model",
+            "paragraph": "Model used for the denoising steps. Different models are trained to specialize in producing different aesthetic results and content."
+        },
+        "paramPositiveConditioning": {
+            "heading": "Positive Prompts",
+            "paragraph": "This is where you enter your positive prompts."
+        },
+        "paramScheduler": {
+            "heading": "Scheduler",
+            "paragraph": "Scheduler defines how to iteratively add noise to an image or how to update a sample based on a model's output."
+        },
+        "paramSeed": {
+            "heading": "Seed",
+            "paragraph": "Controls the starting noise used for generation. Disable “Random Seed” to produce identical results with the same generation settings."
+        },
+        "paramNegativeConditioning": {
+            "heading": "Negative Prompts",
+            "paragraph": "This is where you enter your negative prompts."
+        },
+        "paramSteps": {
+            "heading": "Steps",
+            "paragraph": "Number of steps that will be performed in each generation. Higher step counts will typically create better images but will require more generation time."
+        },
+        "paramVAE": {
+            "heading": "VAE",
+            "paragraph": "Model used for translating AI output into the final image."
+        },
+        "paramVAEPrecision": {
+            "heading": "VAE Precision",
+            "paragraph": "The precision used during VAE encoding and decoding. Fp16/Half precision is more efficient, at the expense of minor image variations."
+        },
+        "scaleBeforeProcessing": {
+            "heading": "Scale Before Processing",
+            "paragraph": "Scales the selected area to the size best suited for the model before the image generation process."
+        }
+    },
     "unifiedCanvas": {
         "layer": "Layer",
         "base": "Base",

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

@@ -17,12 +17,13 @@ import { useAppSelector } from '../../app/store/storeHooks';
 import { systemSelector } from '../../features/system/store/systemSelectors';
 
 interface Props extends PopoverProps {
-  heading: string;
+  heading?: string;
   paragraph: string;
   triggerComponent: ReactNode;
   image?: string;
   buttonLabel?: string;
   buttonHref?: string;
+  placement?: string;
 }
 
 function IAIInformationalPopover({
@@ -32,6 +33,7 @@ function IAIInformationalPopover({
   buttonLabel,
   buttonHref,
   triggerComponent,
+  placement,
 }: Props) {
   const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
 
@@ -40,7 +42,7 @@ function IAIInformationalPopover({
   } else {
     return (
       <Popover
-        placement="top"
+        placement={placement || 'top'}
         closeOnBlur={false}
         trigger="hover"
         variant="informational"
@@ -58,14 +60,15 @@ function IAIInformationalPopover({
                 gap: 3,
                 flexDirection: 'column',
                 width: '100%',
+                alignItems: 'center',
               }}
             >
               {image && (
                 <Image
                   sx={{
                     objectFit: 'contain',
-                    maxW: '100%',
+                    maxW: '60%',
-                    maxH: 'full',
+                    maxH: '60%',
                     backgroundColor: 'white',
                   }}
                   src={image}
@@ -78,13 +81,13 @@ function IAIInformationalPopover({
                   flexDirection: 'column',
 
                   p: 3,
-                  pt: 0,
+                  pt: heading ? 0 : 3,
                 }}
               >
-                <PopoverHeader>{heading}</PopoverHeader>
+                {heading && <PopoverHeader>{heading}</PopoverHeader>}
-                <Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
+                <Text sx={{ px: 3 }}>{paragraph}</Text>
                 {buttonLabel && (
-                  <Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
+                  <Flex sx={{ px: 3 }} justifyContent="flex-end">
                     <Button
                       onClick={() => window.open(buttonHref)}
                       size="sm"

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

@@ -15,6 +15,7 @@ import {
   controlNetBeginStepPctChanged,
   controlNetEndStepPctChanged,
 } from 'features/controlNet/store/controlNetSlice';
+import { ControlNetBeginEndPopover } from 'features/informationalPopovers/components/controlNetBeginEnd';
 import { memo, useCallback } from 'react';
 
 type Props = {
@@ -47,6 +48,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
   );
 
   return (
+    <ControlNetBeginEndPopover>
       <FormControl isDisabled={!isEnabled}>
         <FormLabel>Begin / End Step Percentage</FormLabel>
         <HStack w="100%" gap={2} alignItems="center">
@@ -99,6 +101,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
           </RangeSlider>
         </HStack>
       </FormControl>
+    </ControlNetBeginEndPopover>
   );
 };
 

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

@@ -5,6 +5,7 @@ import {
   ControlNetConfig,
   controlNetControlModeChanged,
 } from 'features/controlNet/store/controlNetSlice';
+import { ControlNetControlModePopover } from 'features/informationalPopovers/components/controlNetControlMode';
 import { useCallback } from 'react';
 
 type ParamControlNetControlModeProps = {
@@ -32,6 +33,7 @@ export default function ParamControlNetControlMode(
   );
 
   return (
+    <ControlNetControlModePopover>
       <IAIMantineSelect
         disabled={!isEnabled}
         label="Control Mode"
@@ -39,5 +41,6 @@ export default function ParamControlNetControlMode(
         value={String(controlMode)}
         onChange={handleControlModeChange}
       />
+    </ControlNetControlModePopover>
   );
 }

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

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 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(
@@ -25,6 +26,7 @@ const ParamControlNetFeatureToggle = () => {
   }, [dispatch]);
 
   return (
+    <ControlNetTogglePopover>
       <IAISwitch
         label="Enable ControlNet"
         isChecked={isEnabled}
@@ -33,6 +35,7 @@ const ParamControlNetFeatureToggle = () => {
           width: '100%',
         }}
       />
+    </ControlNetTogglePopover>
   );
 };
 

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

@@ -5,6 +5,7 @@ import {
   ResizeModes,
   controlNetResizeModeChanged,
 } from 'features/controlNet/store/controlNetSlice';
+import { ControlNetResizeModePopover } from 'features/informationalPopovers/components/controlNetResizeMode';
 import { useCallback } from 'react';
 
 type ParamControlNetResizeModeProps = {
@@ -31,6 +32,7 @@ export default function ParamControlNetResizeMode(
   );
 
   return (
+    <ControlNetResizeModePopover>
       <IAIMantineSelect
         disabled={!isEnabled}
         label="Resize Mode"
@@ -38,5 +40,6 @@ export default function ParamControlNetResizeMode(
         value={String(resizeMode)}
         onChange={handleResizeModeChange}
       />
+    </ControlNetResizeModePopover>
   );
 }

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

@@ -4,6 +4,7 @@ import {
   ControlNetConfig,
   controlNetWeightChanged,
 } from 'features/controlNet/store/controlNetSlice';
+import { ControlNetWeightPopover } from 'features/informationalPopovers/components/controlNetWeight';
 import { memo, useCallback } from 'react';
 
 type ParamControlNetWeightProps = {
@@ -21,6 +22,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
   );
 
   return (
+    <ControlNetWeightPopover>
       <IAISlider
         isDisabled={!isEnabled}
         label="Weight"
@@ -32,6 +34,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
         withSliderMarks
         sliderMarks={[0, 1, 2]}
       />
+    </ControlNetWeightPopover>
   );
 };
 

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

@@ -5,6 +5,7 @@ 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';
 
 const selector = createSelector(
   stateSelector,
@@ -25,12 +26,14 @@ const ParamDynamicPromptsCombinatorial = () => {
   }, [dispatch]);
 
   return (
+    <DynamicPromptsCombinatorialPopover>
       <IAISwitch
         isDisabled={isDisabled}
         label="Combinatorial Generation"
         isChecked={combinatorial}
         onChange={handleChange}
       />
+    </DynamicPromptsCombinatorialPopover>
   );
 };
 

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

@@ -5,6 +5,7 @@ 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';
 
 const selector = createSelector(
   stateSelector,
@@ -25,11 +26,13 @@ const ParamDynamicPromptsToggle = () => {
   }, [dispatch]);
 
   return (
+    <DynamicPromptsTogglePopover>
       <IAISwitch
         label="Enable Dynamic Prompts"
         isChecked={isEnabled}
         onChange={handleToggleIsEnabled}
       />
+    </DynamicPromptsTogglePopover>
   );
 };
 

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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,12 +1,15 @@
 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
-      heading="Prompt Box"
+      paragraph={t('popovers.paramPositiveConditioning.paragraph')}
-      paragraph="This is where you enter your prompt"
+      heading={t('popovers.paramPositiveConditioning.heading')}
       buttonLabel="Learn more"
       buttonHref="http://google.com"
       image={InvokeAILogoImage}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

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

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

@@ -1,6 +1,7 @@
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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';
@@ -42,6 +43,7 @@ export default function ParamClipSkip() {
   }, [model]);
 
   return (
+    <ClipSkipPopover>
       <IAISlider
         label={t('parameters.clipSkip')}
         aria-label={t('parameters.clipSkip')}
@@ -56,5 +58,6 @@ export default function ParamClipSkip() {
         withReset
         handleReset={handleClipSkipReset}
       />
+    </ClipSkipPopover>
   );
 }

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

@@ -2,6 +2,7 @@ import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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';
 
@@ -30,12 +31,14 @@ const ParamCanvasCoherenceMode = () => {
   };
 
   return (
+    <CompositingModePopover>
       <IAIMantineSelect
         label={t('parameters.coherenceMode')}
         data={coherenceModeSelectData}
         value={canvasCoherenceMode}
         onChange={handleCoherenceModeChange}
       />
+    </CompositingModePopover>
   );
 };
 

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

@@ -1,6 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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';
@@ -13,6 +14,7 @@ const ParamCanvasCoherenceSteps = () => {
   const { t } = useTranslation();
 
   return (
+    <CompositingStepsPopover>
       <IAISlider
         label={t('parameters.coherenceSteps')}
         min={1}
@@ -30,6 +32,7 @@ const ParamCanvasCoherenceSteps = () => {
           dispatch(setCanvasCoherenceSteps(20));
         }}
       />
+    </CompositingStepsPopover>
   );
 };
 

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

@@ -1,6 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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';
@@ -13,6 +14,7 @@ const ParamCanvasCoherenceStrength = () => {
   const { t } = useTranslation();
 
   return (
+    <CompositingStrengthPopover>
       <IAISlider
         label={t('parameters.coherenceStrength')}
         min={0}
@@ -30,6 +32,7 @@ const ParamCanvasCoherenceStrength = () => {
           dispatch(setCanvasCoherenceStrength(0.3));
         }}
       />
+    </CompositingStrengthPopover>
   );
 };
 

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

@@ -1,6 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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';
 
@@ -12,6 +13,7 @@ export default function ParamMaskBlur() {
   const { t } = useTranslation();
 
   return (
+    <CompositingBlurPopover>
       <IAISlider
         label={t('parameters.maskBlur')}
         min={0}
@@ -28,5 +30,6 @@ export default function ParamMaskBlur() {
           dispatch(setMaskBlur(16));
         }}
       />
+    </CompositingBlurPopover>
   );
 }

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

@@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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';
 
@@ -28,11 +29,13 @@ export default function ParamMaskBlurMethod() {
   };
 
   return (
+    <CompositingBlurMethodPopover>
       <IAIMantineSelect
         value={maskBlurMethod}
         onChange={handleMaskBlurMethodChange}
         label={t('parameters.maskBlurMethod')}
         data={maskBlurMethods}
       />
+    </CompositingBlurMethodPopover>
   );
 }

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

@@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 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';
@@ -39,6 +40,7 @@ const ParamInfillMethod = () => {
   );
 
   return (
+    <InfillMethodPopover>
       <IAIMantineSelect
         disabled={infill_methods?.length === 0}
         placeholder={isLoading ? 'Loading...' : undefined}
@@ -47,6 +49,7 @@ const ParamInfillMethod = () => {
         data={infill_methods ?? []}
         onChange={handleChange}
       />
+    </InfillMethodPopover>
   );
 };
 

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

@@ -8,6 +8,7 @@ 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';
@@ -35,12 +36,14 @@ const ParamScaleBeforeProcessing = () => {
   };
 
   return (
+    <ScaleBeforeProcessingPopover>
       <IAIMantineSearchableSelect
         label={t('parameters.scaleBeforeProcessing')}
         data={BOUNDING_BOX_SCALES_DICT}
         value={boundingBoxScale}
         onChange={handleChangeBoundingBoxScaleMethod}
       />
+    </ScaleBeforeProcessingPopover>
   );
 };
 

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

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 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';
@@ -53,6 +54,7 @@ const ParamCFGScale = () => {
   );
 
   return shouldUseSliders ? (
+    <ParamCFGScalePopover>
       <IAISlider
         label={t('parameters.cfgScale')}
         step={shift ? 0.1 : 0.5}
@@ -67,7 +69,9 @@ const ParamCFGScale = () => {
         withSliderMarks
         isInteger={false}
       />
+    </ParamCFGScalePopover>
   ) : (
+    <ParamCFGScalePopover>
       <IAINumberInput
         label={t('parameters.cfgScale')}
         step={0.5}
@@ -78,6 +82,7 @@ const ParamCFGScale = () => {
         isInteger={false}
         numberInputFieldProps={{ textAlign: 'center' }}
       />
+    </ParamCFGScalePopover>
   );
 };
 

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

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
+import { ParamImagesPopover } from 'features/informationalPopovers/components/paramImages';
 import { setIterations } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -60,6 +61,7 @@ const ParamIterations = () => {
   }, [dispatch, initial]);
 
   return shouldUseSliders ? (
+    <ParamImagesPopover>
       <IAISlider
         isDisabled={isDisabled}
         label={t('parameters.images')}
@@ -74,7 +76,9 @@ const ParamIterations = () => {
         withSliderMarks
         sliderNumberInputProps={{ max: inputMax }}
       />
+    </ParamImagesPopover>
   ) : (
+    <ParamImagesPopover>
       <IAINumberInput
         isDisabled={isDisabled}
         label={t('parameters.images')}
@@ -85,6 +89,7 @@ const ParamIterations = () => {
         value={iterations}
         numberInputFieldProps={{ textAlign: 'center' }}
       />
+    </ParamImagesPopover>
   );
 };
 

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

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 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 {
@@ -51,12 +52,14 @@ const ParamScheduler = () => {
   );
 
   return (
+    <ParamSchedulerPopover>
       <IAIMantineSearchableSelect
         label={t('parameters.scheduler')}
         value={scheduler}
         data={data}
         onChange={handleChange}
       />
+    </ParamSchedulerPopover>
   );
 };
 

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

@@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 
 import IAISlider from 'common/components/IAISlider';
+import { ParamStepsPopover } from 'features/informationalPopovers/components/paramSteps';
 import {
   clampSymmetrySteps,
   setSteps,
@@ -56,6 +57,7 @@ const ParamSteps = () => {
   }, [dispatch]);
 
   return shouldUseSliders ? (
+    <ParamStepsPopover>
       <IAISlider
         label={t('parameters.steps')}
         min={min}
@@ -69,7 +71,9 @@ const ParamSteps = () => {
         withSliderMarks
         sliderNumberInputProps={{ max: inputMax }}
       />
+    </ParamStepsPopover>
   ) : (
+    <ParamStepsPopover>
       <IAINumberInput
         label={t('parameters.steps')}
         min={min}
@@ -80,6 +84,7 @@ const ParamSteps = () => {
         numberInputFieldProps={{ textAlign: 'center' }}
         onBlur={handleBlur}
       />
+    </ParamStepsPopover>
   );
 };
 

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

@@ -21,6 +21,7 @@ import {
   useGetOnnxModelsQuery,
 } from 'services/api/endpoints/models';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
+import { ParamModelPopover } from 'features/informationalPopovers/components/paramModel';
 
 const selector = createSelector(
   stateSelector,
@@ -118,12 +119,15 @@ const ParamMainModelSelect = () => {
       data={[]}
     />
   ) : (
+    <ParamModelPopover>
       <Flex w="100%" alignItems="center" gap={3}>
         <IAIMantineSearchableSelect
           tooltip={selectedModel?.description}
           label={t('modelManager.model')}
           value={selectedModel?.id}
-        placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
+          placeholder={
+            data.length > 0 ? 'Select a model' : 'No models available'
+          }
           data={data}
           error={data.length === 0}
           disabled={data.length === 0}
@@ -136,6 +140,7 @@ const ParamMainModelSelect = () => {
           </Box>
         )}
       </Flex>
+    </ParamModelPopover>
   );
 };
 

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

@@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
+import { NoiseUseCPUPopover } from 'features/informationalPopovers/components/noiseUseCPU';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
 
@@ -26,11 +27,13 @@ export const ParamCpuNoiseToggle = () => {
     dispatch(shouldUseCpuNoiseChanged(e.target.checked));
 
   return (
+    <NoiseUseCPUPopover>
       <IAISwitch
         isDisabled={isDisabled}
         label="Use CPU Noise"
         isChecked={shouldUseCpuNoise}
         onChange={handleChange}
       />
+    </NoiseUseCPUPopover>
   );
 };

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

@@ -1,6 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAISwitch from 'common/components/IAISwitch';
+import { NoiseEnablePopover } from 'features/informationalPopovers/components/noiseEnable';
 import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
 
@@ -15,10 +16,12 @@ export const ParamNoiseToggle = () => {
     dispatch(setShouldUseNoiseSettings(e.target.checked));
 
   return (
+    <NoiseEnablePopover>
       <IAISwitch
         label="Enable Noise Settings"
         isChecked={shouldUseNoiseSettings}
         onChange={handleChange}
       />
+    </NoiseEnablePopover>
   );
 };

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

@@ -3,14 +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';
 
 const ParamSeedFull = () => {
   return (
+    <ParamSeedPopover>
       <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
         <ParamSeed />
         <ParamSeedShuffle />
         <ParamSeedRandomize />
       </Flex>
+    </ParamSeedPopover>
   );
 };
 

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

@@ -15,6 +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';
 
 const selector = createSelector(
   stateSelector,
@@ -93,6 +94,7 @@ const ParamVAEModelSelect = () => {
   );
 
   return (
+    <ParamVAEPopover>
       <IAIMantineSearchableSelect
         itemComponent={IAIMantineSelectItemWithTooltip}
         tooltip={selectedVaeModel?.description}
@@ -104,6 +106,7 @@ const ParamVAEModelSelect = () => {
         disabled={data.length === 0}
         clearable
       />
+    </ParamVAEPopover>
   );
 };
 

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

@@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 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';
@@ -34,12 +35,14 @@ const ParamVAEModelSelect = () => {
   );
 
   return (
+    <ParamVAEPrecisionPopover>
       <IAIMantineSelect
         label="VAE Precision"
         value={vaePrecision}
         data={DATA}
         onChange={handleChange}
       />
+    </ParamVAEPrecisionPopover>
   );
 };
 

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

@@ -7,6 +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';
 
 const selector = createSelector(
   [stateSelector],
@@ -36,6 +37,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
 
   return (
     <SubParametersWrapper>
+      <ParamDenoisingStrengthPopover>
         <IAISlider
           label={`${t('parameters.denoisingStrength')}`}
           step={0.01}
@@ -49,6 +51,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
           withSliderMarks
           withReset
         />
+      </ParamDenoisingStrengthPopover>
     </SubParametersWrapper>
   );
 };