From fcea65770f31df652a429fdbeca561591408acd4 Mon Sep 17 00:00:00 2001
From: Jennifer Player <chainchompa@gmail.com>
Date: Fri, 15 Sep 2023 10:37:05 -0400
Subject: [PATCH] added optional popovers for users to learn more about each
 setting

---
 invokeai/frontend/web/public/locales/en.json  | 126 ++++++++++++++++++
 .../components/IAIInformationalPopover.tsx    |  19 +--
 .../parameters/ParamControlNetBeginEnd.tsx    | 105 ++++++++-------
 .../parameters/ParamControlNetControlMode.tsx |  17 ++-
 .../ParamControlNetFeatureToggle.tsx          |  19 +--
 .../parameters/ParamControlNetResizeMode.tsx  |  17 ++-
 .../parameters/ParamControlNetWeight.tsx      |  25 ++--
 .../ParamDynamicPromptsCombinatorial.tsx      |  15 ++-
 .../components/ParamDynamicPromptsEnabled.tsx |  13 +-
 .../components/clipSkip.tsx                   |  15 +++
 .../components/compositingBlur.tsx            |  15 +++
 .../components/compositingBlurMethod.tsx      |  15 +++
 .../components/compositingCoherencePass.tsx   |  15 +++
 .../components/compositingMode.tsx            |  15 +++
 .../components/compositingSteps.tsx           |  15 +++
 .../components/compositingStrength.tsx        |  15 +++
 .../components/compositiveMaskAdjustments.tsx |  15 +++
 .../components/controlNetBeginEnd.tsx         |  15 +++
 .../components/controlNetControlMode.tsx      |  15 +++
 .../components/controlNetResizeMode.tsx       |  15 +++
 .../components/controlNetToggle.tsx           |  15 +++
 .../components/controlNetWeight.tsx           |  15 +++
 .../dynamicPromptsCombinatorial.tsx           |  17 +++
 .../components/dynamicPromptsToggle.tsx       |  15 +++
 .../components/infillMethod.tsx               |  15 +++
 .../informationalPopovers/components/lora.tsx |  15 +++
 .../components/noiseEnable.tsx                |  15 +++
 .../components/noiseUseCPU.tsx                |  15 +++
 .../components/paramCFGScale.tsx              |  15 +++
 .../components/paramDenoisingStrength.tsx     |  15 +++
 .../components/paramImages.tsx                |  15 +++
 .../components/paramModel.tsx                 |  15 +++
 .../components/paramPositiveConditioning.tsx  |   7 +-
 .../components/paramScheduler.tsx             |  15 +++
 .../components/paramSeed.tsx                  |  15 +++
 .../components/paramSteps.tsx                 |  15 +++
 .../components/paramVAE.tsx                   |  15 +++
 .../components/paramVAEPrecision.tsx          |  15 +++
 .../components/scaleBeforeProcessing.tsx      |  15 +++
 .../features/lora/components/ParamLora.tsx    |  51 +++----
 .../Parameters/Advanced/ParamClipSkip.tsx     |  31 +++--
 .../ParamCanvasCoherenceMode.tsx              |  15 ++-
 .../ParamCanvasCoherenceSteps.tsx             |  37 ++---
 .../ParamCanvasCoherenceStrength.tsx          |  37 ++---
 .../MaskAdjustment/ParamMaskBlur.tsx          |  35 ++---
 .../MaskAdjustment/ParamMaskBlurMethod.tsx    |  15 ++-
 .../InfillAndScaling/ParamInfillMethod.tsx    |  19 +--
 .../ParamScaleBeforeProcessing.tsx            |  15 ++-
 .../Parameters/Core/ParamCFGScale.tsx         |  53 ++++----
 .../Parameters/Core/ParamIterations.tsx       |  53 ++++----
 .../Parameters/Core/ParamScheduler.tsx        |  15 ++-
 .../components/Parameters/Core/ParamSteps.tsx |  51 +++----
 .../MainModel/ParamMainModelSelect.tsx        |  41 +++---
 .../Parameters/Noise/ParamCpuNoise.tsx        |  15 ++-
 .../Parameters/Noise/ParamNoiseToggle.tsx     |  13 +-
 .../Parameters/Seed/ParamSeedFull.tsx         |  13 +-
 .../VAEModel/ParamVAEModelSelect.tsx          |  25 ++--
 .../Parameters/VAEModel/ParamVAEPrecision.tsx |  15 ++-
 .../ParamSDXLImg2ImgDenoisingStrength.tsx     |  29 ++--
 59 files changed, 1018 insertions(+), 360 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/clipSkip.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlur.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlurMethod.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositingCoherencePass.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositingMode.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositingSteps.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositingStrength.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/compositiveMaskAdjustments.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/controlNetBeginEnd.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/controlNetControlMode.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/controlNetResizeMode.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/controlNetToggle.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/controlNetWeight.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsCombinatorial.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsToggle.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/infillMethod.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/lora.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/noiseEnable.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/noiseUseCPU.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramCFGScale.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramDenoisingStrength.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramImages.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramModel.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramScheduler.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramSeed.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramSteps.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramVAE.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramVAEPrecision.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/scaleBeforeProcessing.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 125554fc40..03e41fc571 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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",
diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx b/invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
index 8f4e6428db..a5bc691bf6 100644
--- a/invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
+++ b/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%',
-                    maxH: 'full',
+                    maxW: '60%',
+                    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>
-                <Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
+                {heading && <PopoverHeader>{heading}</PopoverHeader>}
+                <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"
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx
index 1219239e5d..aa055d037a 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx
+++ b/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,58 +48,60 @@ const ParamControlNetBeginEnd = (props: Props) => {
   );
 
   return (
-    <FormControl isDisabled={!isEnabled}>
-      <FormLabel>Begin / End Step Percentage</FormLabel>
-      <HStack w="100%" gap={2} alignItems="center">
-        <RangeSlider
-          aria-label={['Begin Step %', 'End Step %']}
-          value={[beginStepPct, endStepPct]}
-          onChange={handleStepPctChanged}
-          min={0}
-          max={1}
-          step={0.01}
-          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',
-            }}
+    <ControlNetBeginEndPopover>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>Begin / End Step Percentage</FormLabel>
+        <HStack w="100%" gap={2} alignItems="center">
+          <RangeSlider
+            aria-label={['Begin Step %', 'End Step %']}
+            value={[beginStepPct, endStepPct]}
+            onChange={handleStepPctChanged}
+            min={0}
+            max={1}
+            step={0.01}
+            minStepsBetweenThumbs={5}
+            isDisabled={!isEnabled}
           >
-            0%
-          </RangeSliderMark>
-          <RangeSliderMark
-            value={0.5}
-            sx={{
-              insetInlineStart: '50% !important',
-              transform: 'translateX(-50%)',
-            }}
-          >
-            50%
-          </RangeSliderMark>
-          <RangeSliderMark
-            value={1}
-            sx={{
-              insetInlineStart: 'unset !important',
-              insetInlineEnd: '0 !important',
-            }}
-          >
-            100%
-          </RangeSliderMark>
-        </RangeSlider>
-      </HStack>
-    </FormControl>
+            <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',
+              }}
+            >
+              0%
+            </RangeSliderMark>
+            <RangeSliderMark
+              value={0.5}
+              sx={{
+                insetInlineStart: '50% !important',
+                transform: 'translateX(-50%)',
+              }}
+            >
+              50%
+            </RangeSliderMark>
+            <RangeSliderMark
+              value={1}
+              sx={{
+                insetInlineStart: 'unset !important',
+                insetInlineEnd: '0 !important',
+              }}
+            >
+              100%
+            </RangeSliderMark>
+          </RangeSlider>
+        </HStack>
+      </FormControl>
+    </ControlNetBeginEndPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
index 761edde42b..997c1970e9 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
+++ b/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,12 +33,14 @@ export default function ParamControlNetControlMode(
   );
 
   return (
-    <IAIMantineSelect
-      disabled={!isEnabled}
-      label="Control Mode"
-      data={CONTROL_MODE_DATA}
-      value={String(controlMode)}
-      onChange={handleControlModeChange}
-    />
+    <ControlNetControlModePopover>
+      <IAIMantineSelect
+        disabled={!isEnabled}
+        label="Control Mode"
+        data={CONTROL_MODE_DATA}
+        value={String(controlMode)}
+        onChange={handleControlModeChange}
+      />
+    </ControlNetControlModePopover>
   );
 }
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx
index 97a54dc7d1..930ec26de7 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx
+++ b/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,14 +26,16 @@ const ParamControlNetFeatureToggle = () => {
   }, [dispatch]);
 
   return (
-    <IAISwitch
-      label="Enable ControlNet"
-      isChecked={isEnabled}
-      onChange={handleChange}
-      formControlProps={{
-        width: '100%',
-      }}
-    />
+    <ControlNetTogglePopover>
+      <IAISwitch
+        label="Enable ControlNet"
+        isChecked={isEnabled}
+        onChange={handleChange}
+        formControlProps={{
+          width: '100%',
+        }}
+      />
+    </ControlNetTogglePopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx
index 72f15fb178..b7e4437eb7 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx
+++ b/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,12 +32,14 @@ export default function ParamControlNetResizeMode(
   );
 
   return (
-    <IAIMantineSelect
-      disabled={!isEnabled}
-      label="Resize Mode"
-      data={RESIZE_MODE_DATA}
-      value={String(resizeMode)}
-      onChange={handleResizeModeChange}
-    />
+    <ControlNetResizeModePopover>
+      <IAIMantineSelect
+        disabled={!isEnabled}
+        label="Resize Mode"
+        data={RESIZE_MODE_DATA}
+        value={String(resizeMode)}
+        onChange={handleResizeModeChange}
+      />
+    </ControlNetResizeModePopover>
   );
 }
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx
index 6725c47bb8..b16c006aa5 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx
+++ b/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,17 +22,19 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
   );
 
   return (
-    <IAISlider
-      isDisabled={!isEnabled}
-      label="Weight"
-      value={weight}
-      onChange={handleWeightChanged}
-      min={0}
-      max={2}
-      step={0.01}
-      withSliderMarks
-      sliderMarks={[0, 1, 2]}
-    />
+    <ControlNetWeightPopover>
+      <IAISlider
+        isDisabled={!isEnabled}
+        label="Weight"
+        value={weight}
+        onChange={handleWeightChanged}
+        min={0}
+        max={2}
+        step={0.01}
+        withSliderMarks
+        sliderMarks={[0, 1, 2]}
+      />
+    </ControlNetWeightPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
index c028a5d55c..aa12c3a602 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
+++ b/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 (
-    <IAISwitch
-      isDisabled={isDisabled}
-      label="Combinatorial Generation"
-      isChecked={combinatorial}
-      onChange={handleChange}
-    />
+    <DynamicPromptsCombinatorialPopover>
+      <IAISwitch
+        isDisabled={isDisabled}
+        label="Combinatorial Generation"
+        isChecked={combinatorial}
+        onChange={handleChange}
+      />
+    </DynamicPromptsCombinatorialPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsEnabled.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsEnabled.tsx
index 1b31147937..9585a288fd 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsEnabled.tsx
+++ b/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 (
-    <IAISwitch
-      label="Enable Dynamic Prompts"
-      isChecked={isEnabled}
-      onChange={handleToggleIsEnabled}
-    />
+    <DynamicPromptsTogglePopover>
+      <IAISwitch
+        label="Enable Dynamic Prompts"
+        isChecked={isEnabled}
+        onChange={handleToggleIsEnabled}
+      />
+    </DynamicPromptsTogglePopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/clipSkip.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/clipSkip.tsx
new file mode 100644
index 0000000000..c267fbc8f2
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlur.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlur.tsx
new file mode 100644
index 0000000000..3dfdbd33ec
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlurMethod.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlurMethod.tsx
new file mode 100644
index 0000000000..9fbc5f2cf9
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositingCoherencePass.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositingCoherencePass.tsx
new file mode 100644
index 0000000000..462d136553
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositingMode.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositingMode.tsx
new file mode 100644
index 0000000000..d5bb12f09f
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositingSteps.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositingSteps.tsx
new file mode 100644
index 0000000000..a8aef2b9d8
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositingStrength.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositingStrength.tsx
new file mode 100644
index 0000000000..9a0d6d2f68
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/compositiveMaskAdjustments.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/compositiveMaskAdjustments.tsx
new file mode 100644
index 0000000000..541e6c1e56
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetBeginEnd.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetBeginEnd.tsx
new file mode 100644
index 0000000000..fbf2b25d30
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetControlMode.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetControlMode.tsx
new file mode 100644
index 0000000000..f8a844edae
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetResizeMode.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetResizeMode.tsx
new file mode 100644
index 0000000000..00dfae502b
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetToggle.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetToggle.tsx
new file mode 100644
index 0000000000..f85a3a7a54
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetWeight.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/controlNetWeight.tsx
new file mode 100644
index 0000000000..ee358651b3
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsCombinatorial.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsCombinatorial.tsx
new file mode 100644
index 0000000000..d294f41680
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsToggle.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsToggle.tsx
new file mode 100644
index 0000000000..9222d0d03d
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/infillMethod.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/infillMethod.tsx
new file mode 100644
index 0000000000..8a2fc562e1
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/lora.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/lora.tsx
new file mode 100644
index 0000000000..fbeebb7bd7
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/noiseEnable.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/noiseEnable.tsx
new file mode 100644
index 0000000000..cfe33e60ab
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/noiseUseCPU.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/noiseUseCPU.tsx
new file mode 100644
index 0000000000..88524eace5
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramCFGScale.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramCFGScale.tsx
new file mode 100644
index 0000000000..47ab8acbbd
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramDenoisingStrength.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramDenoisingStrength.tsx
new file mode 100644
index 0000000000..0c60604bcf
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramImages.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramImages.tsx
new file mode 100644
index 0000000000..f9516f4df0
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramModel.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramModel.tsx
new file mode 100644
index 0000000000..10a454cf18
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx
index 66c047fa26..8736559e61 100644
--- a/invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx
+++ b/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="This is where you enter your prompt"
+      paragraph={t('popovers.paramPositiveConditioning.paragraph')}
+      heading={t('popovers.paramPositiveConditioning.heading')}
       buttonLabel="Learn more"
       buttonHref="http://google.com"
       image={InvokeAILogoImage}
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramScheduler.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramScheduler.tsx
new file mode 100644
index 0000000000..342ec6203d
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramSeed.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramSeed.tsx
new file mode 100644
index 0000000000..5b0572224b
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramSteps.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramSteps.tsx
new file mode 100644
index 0000000000..d5dc47c336
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramVAE.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramVAE.tsx
new file mode 100644
index 0000000000..e006e162c6
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramVAEPrecision.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramVAEPrecision.tsx
new file mode 100644
index 0000000000..f2d70775b1
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/scaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/scaleBeforeProcessing.tsx
new file mode 100644
index 0000000000..0390f342ba
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLora.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLora.tsx
index 3432838ec0..3c57961f89 100644
--- a/invokeai/frontend/web/src/features/lora/components/ParamLora.tsx
+++ b/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,30 +36,32 @@ const ParamLora = (props: Props) => {
   }, [dispatch, lora.id]);
 
   return (
-    <Flex sx={{ gap: 2.5, alignItems: 'flex-end' }}>
-      <IAISlider
-        label={lora.model_name}
-        value={lora.weight}
-        onChange={handleChange}
-        min={-1}
-        max={2}
-        step={0.01}
-        withInput
-        withReset
-        handleReset={handleReset}
-        withSliderMarks
-        sliderMarks={[-1, 0, 1, 2]}
-        sliderNumberInputProps={{ min: -50, max: 50 }}
-      />
-      <IAIIconButton
-        size="sm"
-        onClick={handleRemoveLora}
-        tooltip="Remove LoRA"
-        aria-label="Remove LoRA"
-        icon={<FaTrash />}
-        colorScheme="error"
-      />
-    </Flex>
+    <LoraPopover>
+      <Flex sx={{ gap: 2.5, alignItems: 'flex-end' }}>
+        <IAISlider
+          label={lora.model_name}
+          value={lora.weight}
+          onChange={handleChange}
+          min={-1}
+          max={2}
+          step={0.01}
+          withInput
+          withReset
+          handleReset={handleReset}
+          withSliderMarks
+          sliderMarks={[-1, 0, 1, 2]}
+          sliderNumberInputProps={{ min: -50, max: 50 }}
+        />
+        <IAIIconButton
+          size="sm"
+          onClick={handleRemoveLora}
+          tooltip="Remove LoRA"
+          aria-label="Remove LoRA"
+          icon={<FaTrash />}
+          colorScheme="error"
+        />
+      </Flex>
+    </LoraPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClipSkip.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClipSkip.tsx
index f51e42b6a1..4faf8a8eac 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClipSkip.tsx
+++ b/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,19 +43,21 @@ export default function ParamClipSkip() {
   }, [model]);
 
   return (
-    <IAISlider
-      label={t('parameters.clipSkip')}
-      aria-label={t('parameters.clipSkip')}
-      min={0}
-      max={max}
-      step={1}
-      value={clipSkip}
-      onChange={handleClipSkipChange}
-      withSliderMarks
-      sliderMarks={sliderMarks}
-      withInput
-      withReset
-      handleReset={handleClipSkipReset}
-    />
+    <ClipSkipPopover>
+      <IAISlider
+        label={t('parameters.clipSkip')}
+        aria-label={t('parameters.clipSkip')}
+        min={0}
+        max={max}
+        step={1}
+        value={clipSkip}
+        onChange={handleClipSkipChange}
+        withSliderMarks
+        sliderMarks={sliderMarks}
+        withInput
+        withReset
+        handleReset={handleClipSkipReset}
+      />
+    </ClipSkipPopover>
   );
 }
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
index afc68c94ac..169cb96db0 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
+++ b/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 (
-    <IAIMantineSelect
-      label={t('parameters.coherenceMode')}
-      data={coherenceModeSelectData}
-      value={canvasCoherenceMode}
-      onChange={handleCoherenceModeChange}
-    />
+    <CompositingModePopover>
+      <IAIMantineSelect
+        label={t('parameters.coherenceMode')}
+        data={coherenceModeSelectData}
+        value={canvasCoherenceMode}
+        onChange={handleCoherenceModeChange}
+      />
+    </CompositingModePopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
index 5482a7e1d9..187d6577e0 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
+++ b/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,23 +14,25 @@ const ParamCanvasCoherenceSteps = () => {
   const { t } = useTranslation();
 
   return (
-    <IAISlider
-      label={t('parameters.coherenceSteps')}
-      min={1}
-      max={100}
-      step={1}
-      sliderNumberInputProps={{ max: 999 }}
-      value={canvasCoherenceSteps}
-      onChange={(v) => {
-        dispatch(setCanvasCoherenceSteps(v));
-      }}
-      withInput
-      withSliderMarks
-      withReset
-      handleReset={() => {
-        dispatch(setCanvasCoherenceSteps(20));
-      }}
-    />
+    <CompositingStepsPopover>
+      <IAISlider
+        label={t('parameters.coherenceSteps')}
+        min={1}
+        max={100}
+        step={1}
+        sliderNumberInputProps={{ max: 999 }}
+        value={canvasCoherenceSteps}
+        onChange={(v) => {
+          dispatch(setCanvasCoherenceSteps(v));
+        }}
+        withInput
+        withSliderMarks
+        withReset
+        handleReset={() => {
+          dispatch(setCanvasCoherenceSteps(20));
+        }}
+      />
+    </CompositingStepsPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
index f478bd70fe..c7e763c1eb 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
+++ b/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,23 +14,25 @@ const ParamCanvasCoherenceStrength = () => {
   const { t } = useTranslation();
 
   return (
-    <IAISlider
-      label={t('parameters.coherenceStrength')}
-      min={0}
-      max={1}
-      step={0.01}
-      sliderNumberInputProps={{ max: 999 }}
-      value={canvasCoherenceStrength}
-      onChange={(v) => {
-        dispatch(setCanvasCoherenceStrength(v));
-      }}
-      withInput
-      withSliderMarks
-      withReset
-      handleReset={() => {
-        dispatch(setCanvasCoherenceStrength(0.3));
-      }}
-    />
+    <CompositingStrengthPopover>
+      <IAISlider
+        label={t('parameters.coherenceStrength')}
+        min={0}
+        max={1}
+        step={0.01}
+        sliderNumberInputProps={{ max: 999 }}
+        value={canvasCoherenceStrength}
+        onChange={(v) => {
+          dispatch(setCanvasCoherenceStrength(v));
+        }}
+        withInput
+        withSliderMarks
+        withReset
+        handleReset={() => {
+          dispatch(setCanvasCoherenceStrength(0.3));
+        }}
+      />
+    </CompositingStrengthPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
index 82b82228e2..0211d4bf98 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
+++ b/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,21 +13,23 @@ export default function ParamMaskBlur() {
   const { t } = useTranslation();
 
   return (
-    <IAISlider
-      label={t('parameters.maskBlur')}
-      min={0}
-      max={64}
-      sliderNumberInputProps={{ max: 512 }}
-      value={maskBlur}
-      onChange={(v) => {
-        dispatch(setMaskBlur(v));
-      }}
-      withInput
-      withSliderMarks
-      withReset
-      handleReset={() => {
-        dispatch(setMaskBlur(16));
-      }}
-    />
+    <CompositingBlurPopover>
+      <IAISlider
+        label={t('parameters.maskBlur')}
+        min={0}
+        max={64}
+        sliderNumberInputProps={{ max: 512 }}
+        value={maskBlur}
+        onChange={(v) => {
+          dispatch(setMaskBlur(v));
+        }}
+        withInput
+        withSliderMarks
+        withReset
+        handleReset={() => {
+          dispatch(setMaskBlur(16));
+        }}
+      />
+    </CompositingBlurPopover>
   );
 }
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
index 62d0605640..77038066f9 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
+++ b/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 (
-    <IAIMantineSelect
-      value={maskBlurMethod}
-      onChange={handleMaskBlurMethodChange}
-      label={t('parameters.maskBlurMethod')}
-      data={maskBlurMethods}
-    />
+    <CompositingBlurMethodPopover>
+      <IAIMantineSelect
+        value={maskBlurMethod}
+        onChange={handleMaskBlurMethodChange}
+        label={t('parameters.maskBlurMethod')}
+        data={maskBlurMethods}
+      />
+    </CompositingBlurMethodPopover>
   );
 }
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
index 9ac0e3588f..a6f531ae19 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
+++ b/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,14 +40,16 @@ const ParamInfillMethod = () => {
   );
 
   return (
-    <IAIMantineSelect
-      disabled={infill_methods?.length === 0}
-      placeholder={isLoading ? 'Loading...' : undefined}
-      label={t('parameters.infillMethod')}
-      value={infillMethod}
-      data={infill_methods ?? []}
-      onChange={handleChange}
-    />
+    <InfillMethodPopover>
+      <IAIMantineSelect
+        disabled={infill_methods?.length === 0}
+        placeholder={isLoading ? 'Loading...' : undefined}
+        label={t('parameters.infillMethod')}
+        value={infillMethod}
+        data={infill_methods ?? []}
+        onChange={handleChange}
+      />
+    </InfillMethodPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
index e00d56b639..a1164605df 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
+++ b/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 (
-    <IAIMantineSearchableSelect
-      label={t('parameters.scaleBeforeProcessing')}
-      data={BOUNDING_BOX_SCALES_DICT}
-      value={boundingBoxScale}
-      onChange={handleChangeBoundingBoxScaleMethod}
-    />
+    <ScaleBeforeProcessingPopover>
+      <IAIMantineSearchableSelect
+        label={t('parameters.scaleBeforeProcessing')}
+        data={BOUNDING_BOX_SCALES_DICT}
+        value={boundingBoxScale}
+        onChange={handleChangeBoundingBoxScaleMethod}
+      />
+    </ScaleBeforeProcessingPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx
index 54a7ccbe65..e1413b9c2f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx
+++ b/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,31 +54,35 @@ const ParamCFGScale = () => {
   );
 
   return shouldUseSliders ? (
-    <IAISlider
-      label={t('parameters.cfgScale')}
-      step={shift ? 0.1 : 0.5}
-      min={min}
-      max={sliderMax}
-      onChange={handleChange}
-      handleReset={handleReset}
-      value={cfgScale}
-      sliderNumberInputProps={{ max: inputMax }}
-      withInput
-      withReset
-      withSliderMarks
-      isInteger={false}
-    />
+    <ParamCFGScalePopover>
+      <IAISlider
+        label={t('parameters.cfgScale')}
+        step={shift ? 0.1 : 0.5}
+        min={min}
+        max={sliderMax}
+        onChange={handleChange}
+        handleReset={handleReset}
+        value={cfgScale}
+        sliderNumberInputProps={{ max: inputMax }}
+        withInput
+        withReset
+        withSliderMarks
+        isInteger={false}
+      />
+    </ParamCFGScalePopover>
   ) : (
-    <IAINumberInput
-      label={t('parameters.cfgScale')}
-      step={0.5}
-      min={min}
-      max={inputMax}
-      onChange={handleChange}
-      value={cfgScale}
-      isInteger={false}
-      numberInputFieldProps={{ textAlign: 'center' }}
-    />
+    <ParamCFGScalePopover>
+      <IAINumberInput
+        label={t('parameters.cfgScale')}
+        step={0.5}
+        min={min}
+        max={inputMax}
+        onChange={handleChange}
+        value={cfgScale}
+        isInteger={false}
+        numberInputFieldProps={{ textAlign: 'center' }}
+      />
+    </ParamCFGScalePopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx
index 1e203a1e45..391457a43b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx
+++ b/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,31 +61,35 @@ const ParamIterations = () => {
   }, [dispatch, initial]);
 
   return shouldUseSliders ? (
-    <IAISlider
-      isDisabled={isDisabled}
-      label={t('parameters.images')}
-      step={step}
-      min={min}
-      max={sliderMax}
-      onChange={handleChange}
-      handleReset={handleReset}
-      value={iterations}
-      withInput
-      withReset
-      withSliderMarks
-      sliderNumberInputProps={{ max: inputMax }}
-    />
+    <ParamImagesPopover>
+      <IAISlider
+        isDisabled={isDisabled}
+        label={t('parameters.images')}
+        step={step}
+        min={min}
+        max={sliderMax}
+        onChange={handleChange}
+        handleReset={handleReset}
+        value={iterations}
+        withInput
+        withReset
+        withSliderMarks
+        sliderNumberInputProps={{ max: inputMax }}
+      />
+    </ParamImagesPopover>
   ) : (
-    <IAINumberInput
-      isDisabled={isDisabled}
-      label={t('parameters.images')}
-      step={step}
-      min={min}
-      max={inputMax}
-      onChange={handleChange}
-      value={iterations}
-      numberInputFieldProps={{ textAlign: 'center' }}
-    />
+    <ParamImagesPopover>
+      <IAINumberInput
+        isDisabled={isDisabled}
+        label={t('parameters.images')}
+        step={step}
+        min={min}
+        max={inputMax}
+        onChange={handleChange}
+        value={iterations}
+        numberInputFieldProps={{ textAlign: 'center' }}
+      />
+    </ParamImagesPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
index da1b359b37..e613b50b5b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
+++ b/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 (
-    <IAIMantineSearchableSelect
-      label={t('parameters.scheduler')}
-      value={scheduler}
-      data={data}
-      onChange={handleChange}
-    />
+    <ParamSchedulerPopover>
+      <IAIMantineSearchableSelect
+        label={t('parameters.scheduler')}
+        value={scheduler}
+        data={data}
+        onChange={handleChange}
+      />
+    </ParamSchedulerPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx
index 3728e59158..dd1ee4c7f4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx
+++ b/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,30 +57,34 @@ const ParamSteps = () => {
   }, [dispatch]);
 
   return shouldUseSliders ? (
-    <IAISlider
-      label={t('parameters.steps')}
-      min={min}
-      max={sliderMax}
-      step={step}
-      onChange={handleChange}
-      handleReset={handleReset}
-      value={steps}
-      withInput
-      withReset
-      withSliderMarks
-      sliderNumberInputProps={{ max: inputMax }}
-    />
+    <ParamStepsPopover>
+      <IAISlider
+        label={t('parameters.steps')}
+        min={min}
+        max={sliderMax}
+        step={step}
+        onChange={handleChange}
+        handleReset={handleReset}
+        value={steps}
+        withInput
+        withReset
+        withSliderMarks
+        sliderNumberInputProps={{ max: inputMax }}
+      />
+    </ParamStepsPopover>
   ) : (
-    <IAINumberInput
-      label={t('parameters.steps')}
-      min={min}
-      max={inputMax}
-      step={step}
-      onChange={handleChange}
-      value={steps}
-      numberInputFieldProps={{ textAlign: 'center' }}
-      onBlur={handleBlur}
-    />
+    <ParamStepsPopover>
+      <IAINumberInput
+        label={t('parameters.steps')}
+        min={min}
+        max={inputMax}
+        step={step}
+        onChange={handleChange}
+        value={steps}
+        numberInputFieldProps={{ textAlign: 'center' }}
+        onBlur={handleBlur}
+      />
+    </ParamStepsPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx
index 05b5b6468a..daebc503a5 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx
+++ b/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,24 +119,28 @@ const ParamMainModelSelect = () => {
       data={[]}
     />
   ) : (
-    <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'}
-        data={data}
-        error={data.length === 0}
-        disabled={data.length === 0}
-        onChange={handleChangeModel}
-        w="100%"
-      />
-      {isSyncModelEnabled && (
-        <Box mt={7}>
-          <SyncModelsButton iconMode />
-        </Box>
-      )}
-    </Flex>
+    <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'
+          }
+          data={data}
+          error={data.length === 0}
+          disabled={data.length === 0}
+          onChange={handleChangeModel}
+          w="100%"
+        />
+        {isSyncModelEnabled && (
+          <Box mt={7}>
+            <SyncModelsButton iconMode />
+          </Box>
+        )}
+      </Flex>
+    </ParamModelPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
index 45fd7fcf57..cf4a8fcdbf 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
+++ b/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 (
-    <IAISwitch
-      isDisabled={isDisabled}
-      label="Use CPU Noise"
-      isChecked={shouldUseCpuNoise}
-      onChange={handleChange}
-    />
+    <NoiseUseCPUPopover>
+      <IAISwitch
+        isDisabled={isDisabled}
+        label="Use CPU Noise"
+        isChecked={shouldUseCpuNoise}
+        onChange={handleChange}
+      />
+    </NoiseUseCPUPopover>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx
index c1c2fb5119..87bb0c5fb8 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx
+++ b/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 (
-    <IAISwitch
-      label="Enable Noise Settings"
-      isChecked={shouldUseNoiseSettings}
-      onChange={handleChange}
-    />
+    <NoiseEnablePopover>
+      <IAISwitch
+        label="Enable Noise Settings"
+        isChecked={shouldUseNoiseSettings}
+        onChange={handleChange}
+      />
+    </NoiseEnablePopover>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx
index a1887ec896..e14dea6ec5 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx
+++ b/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 (
-    <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
-      <ParamSeed />
-      <ParamSeedShuffle />
-      <ParamSeedRandomize />
-    </Flex>
+    <ParamSeedPopover>
+      <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
+        <ParamSeed />
+        <ParamSeedShuffle />
+        <ParamSeedRandomize />
+      </Flex>
+    </ParamSeedPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx
index f82b02b5af..5adb13ef45 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx
+++ b/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,17 +94,19 @@ const ParamVAEModelSelect = () => {
   );
 
   return (
-    <IAIMantineSearchableSelect
-      itemComponent={IAIMantineSelectItemWithTooltip}
-      tooltip={selectedVaeModel?.description}
-      label={t('modelManager.vae')}
-      value={selectedVaeModel?.id ?? 'default'}
-      placeholder="Default"
-      data={data}
-      onChange={handleChangeModel}
-      disabled={data.length === 0}
-      clearable
-    />
+    <ParamVAEPopover>
+      <IAIMantineSearchableSelect
+        itemComponent={IAIMantineSelectItemWithTooltip}
+        tooltip={selectedVaeModel?.description}
+        label={t('modelManager.vae')}
+        value={selectedVaeModel?.id ?? 'default'}
+        placeholder="Default"
+        data={data}
+        onChange={handleChangeModel}
+        disabled={data.length === 0}
+        clearable
+      />
+    </ParamVAEPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx
index c57cdc1132..d72e39eb46 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx
+++ b/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 (
-    <IAIMantineSelect
-      label="VAE Precision"
-      value={vaePrecision}
-      data={DATA}
-      onChange={handleChange}
-    />
+    <ParamVAEPrecisionPopover>
+      <IAIMantineSelect
+        label="VAE Precision"
+        value={vaePrecision}
+        data={DATA}
+        onChange={handleChange}
+      />
+    </ParamVAEPrecisionPopover>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx
index 66ad518655..5b0567578f 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx
+++ b/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,19 +37,21 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
 
   return (
     <SubParametersWrapper>
-      <IAISlider
-        label={`${t('parameters.denoisingStrength')}`}
-        step={0.01}
-        min={0}
-        max={1}
-        onChange={handleChange}
-        handleReset={handleReset}
-        value={sdxlImg2ImgDenoisingStrength}
-        isInteger={false}
-        withInput
-        withSliderMarks
-        withReset
-      />
+      <ParamDenoisingStrengthPopover>
+        <IAISlider
+          label={`${t('parameters.denoisingStrength')}`}
+          step={0.01}
+          min={0}
+          max={1}
+          onChange={handleChange}
+          handleReset={handleReset}
+          value={sdxlImg2ImgDenoisingStrength}
+          isInteger={false}
+          withInput
+          withSliderMarks
+          withReset
+        />
+      </ParamDenoisingStrengthPopover>
     </SubParametersWrapper>
   );
 };