(wip) add informational popover base component and sample (#4522)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission


## Have you discussed this change with the InvokeAI team?
- [x] Yes
- [ ] No, because:

      
## Have you updated all relevant documentation?
- [ ] Yes
- [ ] No


## Description
Adds a new common component `IAIInformationPopover` that composes JSX to
be rendered within a popover as a tooltip. We were not able to use the
`Tooltip` component provided by chakra because you cannot interact with
elements within those (at least not that I could get working).

This just a sample over positive prompt. We need content from
@hipsterusername and @Millu before we can roll this out.

## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

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

@@ -1154,6 +1154,136 @@
             "variations": "Try a variation with a value between 0.1 and 1.0 to change the result for a given seed. Interesting variations of the seed are between 0.1 and 0.3."
         }
     },
+    "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."
+        },
+        "compositingCoherenceMode": {
+            "heading": "Mode",
+            "paragraph": "The mode of the Coherence Pass."
+        },
+        "compositingCoherenceSteps": {
+            "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."
+        },
+        "paramCFGScale": {
+            "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."
+        },
+        "paramNegativeConditioning": {
+            "heading": "Negative Prompts",
+            "paragraph": "This is where you enter your negative prompts."
+        },
+        "paramPositiveConditioning": {
+            "heading": "Positive Prompts",
+            "paragraph": "This is where you enter your positive prompts."
+        },
+        "paramRatio": {
+            "heading": "Ratio",
+            "paragraph": "The ratio of the dimensions of the image generated. An image size (in number of pixels) equivalent to 512x512 is recommended for SD1.5 models and a size equivalent to 1024x1024 is recommended for SDXL models."
+        },
+        "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."
+        },
+        "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."
+        }
+    },
     "ui": {
         "hideProgressImages": "Hide Progress Images",
         "lockRatio": "Lock Ratio",

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

@@ -0,0 +1,112 @@
+import {
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverHeader,
+  PopoverBody,
+  PopoverProps,
+  Flex,
+  Text,
+  Image,
+} from '@chakra-ui/react';
+import { useAppSelector } from '../../app/store/storeHooks';
+import { useTranslation } from 'react-i18next';
+
+interface Props extends PopoverProps {
+  details: string;
+  children: JSX.Element;
+  image?: string;
+  buttonLabel?: string;
+  buttonHref?: string;
+  placement?: PopoverProps['placement'];
+}
+
+function IAIInformationalPopover({
+  details,
+  image,
+  buttonLabel,
+  buttonHref,
+  children,
+  placement,
+}: Props): JSX.Element {
+  const shouldDisableInformationalPopovers = useAppSelector(
+    (state) => state.system.shouldDisableInformationalPopovers
+  );
+  const { t } = useTranslation();
+
+  const heading = t(`popovers.${details}.heading`);
+  const paragraph = t(`popovers.${details}.paragraph`);
+
+  if (shouldDisableInformationalPopovers) {
+    return children;
+  } else {
+    return (
+      <Popover
+        placement={placement || 'top'}
+        closeOnBlur={false}
+        trigger="hover"
+        variant="informational"
+      >
+        <PopoverTrigger>
+          <div>{children}</div>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverCloseButton />
+
+          <PopoverBody>
+            <Flex
+              sx={{
+                gap: 3,
+                flexDirection: 'column',
+                width: '100%',
+                alignItems: 'center',
+              }}
+            >
+              {image && (
+                <Image
+                  sx={{
+                    objectFit: 'contain',
+                    maxW: '60%',
+                    maxH: '60%',
+                    backgroundColor: 'white',
+                  }}
+                  src={image}
+                  alt="Optional Image"
+                />
+              )}
+              <Flex
+                sx={{
+                  gap: 3,
+                  flexDirection: 'column',
+                  width: '100%',
+                  p: 3,
+                  pt: heading ? 0 : 3,
+                }}
+              >
+                {heading && <PopoverHeader>{heading}</PopoverHeader>}
+                <Text sx={{ px: 3 }}>{paragraph}</Text>
+                {buttonLabel && (
+                  <Flex sx={{ px: 3 }} justifyContent="flex-end">
+                    <Button
+                      onClick={() => window.open(buttonHref)}
+                      size="sm"
+                      variant="invokeAIOutline"
+                    >
+                      {buttonLabel}
+                    </Button>
+                  </Flex>
+                )}
+              </Flex>
+            </Flex>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+}
+
+export default IAIInformationalPopover;

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

@@ -10,6 +10,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import {
   ControlNetConfig,
   controlNetBeginStepPctChanged,
@@ -49,58 +50,60 @@ const ParamControlNetBeginEnd = (props: Props) => {
   );
 
   return (
-    <FormControl isDisabled={!isEnabled}>
-      <FormLabel>{t('controlnet.beginEndStepPercent')}</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',
-            }}
+    <IAIInformationalPopover details="controlNetBeginEnd">
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.beginEndStepPercent')}</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>
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   ControlModes,
@@ -34,12 +35,14 @@ export default function ParamControlNetControlMode(
   );
 
   return (
-    <IAIMantineSelect
-      disabled={!isEnabled}
-      label={t('controlnet.controlMode')}
-      data={CONTROL_MODE_DATA}
-      value={String(controlMode)}
-      onChange={handleControlModeChange}
-    />
+    <IAIInformationalPopover details="controlNetControlMode">
+      <IAIMantineSelect
+        disabled={!isEnabled}
+        label={t('controlnet.controlMode')}
+        data={CONTROL_MODE_DATA}
+        value={String(controlMode)}
+        onChange={handleControlModeChange}
+      />
+    </IAIInformationalPopover>
   );
 }

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

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

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

@@ -1,4 +1,5 @@
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   ControlNetConfig,
@@ -33,12 +34,14 @@ export default function ParamControlNetResizeMode(
   );
 
   return (
-    <IAIMantineSelect
-      disabled={!isEnabled}
-      label={t('controlnet.resizeMode')}
-      data={RESIZE_MODE_DATA}
-      value={String(resizeMode)}
-      onChange={handleResizeModeChange}
-    />
+    <IAIInformationalPopover details="controlNetResizeMode">
+      <IAIMantineSelect
+        disabled={!isEnabled}
+        label={t('controlnet.resizeMode')}
+        data={RESIZE_MODE_DATA}
+        value={String(resizeMode)}
+        onChange={handleResizeModeChange}
+      />
+    </IAIInformationalPopover>
   );
 }

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

@@ -1,4 +1,5 @@
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import {
   ControlNetConfig,
@@ -23,17 +24,19 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
   );
 
   return (
-    <IAISlider
-      isDisabled={!isEnabled}
-      label={t('controlnet.weight')}
-      value={weight}
-      onChange={handleWeightChanged}
-      min={0}
-      max={2}
-      step={0.01}
-      withSliderMarks
-      sliderMarks={[0, 1, 2]}
-    />
+    <IAIInformationalPopover details="controlNetWeight">
+      <IAISlider
+        isDisabled={!isEnabled}
+        label={t('controlnet.weight')}
+        value={weight}
+        onChange={handleWeightChanged}
+        min={0}
+        max={2}
+        step={0.01}
+        withSliderMarks
+        sliderMarks={[0, 1, 2]}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -6,6 +6,7 @@ import IAISwitch from 'common/components/IAISwitch';
 import { memo, useCallback } from 'react';
 import { combinatorialToggled } from '../store/dynamicPromptsSlice';
 import { useTranslation } from 'react-i18next';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   stateSelector,
@@ -27,11 +28,13 @@ const ParamDynamicPromptsCombinatorial = () => {
   }, [dispatch]);
 
   return (
-    <IAISwitch
-      label={t('dynamicPrompts.combinatorial')}
-      isChecked={combinatorial}
-      onChange={handleChange}
-    />
+    <IAIInformationalPopover details="dynamicPromptsCombinatorial">
+      <IAISwitch
+        label={t('dynamicPrompts.combinatorial')}
+        isChecked={combinatorial}
+        onChange={handleChange}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -10,6 +10,7 @@ import {
   loraWeightChanged,
   loraWeightReset,
 } from '../store/loraSlice';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 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>
+    <IAIInformationalPopover details="lora">
+      <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>
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
 import { clipSkipMap } from 'features/parameters/types/constants';
@@ -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}
-    />
+    <IAIInformationalPopover details="clipSkip">
+      <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}
+      />
+    </IAIInformationalPopover>
   );
 }

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx

@@ -18,6 +18,7 @@ import ParamAspectRatio, {
 } from '../../Core/ParamAspectRatio';
 import ParamBoundingBoxHeight from './ParamBoundingBoxHeight';
 import ParamBoundingBoxWidth from './ParamBoundingBoxWidth';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const sizeOptsSelector = createSelector(
   [generationSelector, canvasSelector],
@@ -93,18 +94,20 @@ export default function ParamBoundingBoxSize() {
       }}
     >
       <Flex alignItems="center" gap={2}>
-        <Text
-          sx={{
-            fontSize: 'sm',
-            width: 'full',
-            color: 'base.700',
-            _dark: {
-              color: 'base.300',
-            },
-          }}
-        >
-          {t('parameters.aspectRatio')}
-        </Text>
+        <IAIInformationalPopover details="paramRatio">
+          <Text
+            sx={{
+              fontSize: 'sm',
+              width: 'full',
+              color: 'base.700',
+              _dark: {
+                color: 'base.300',
+              },
+            }}
+          >
+            {t('parameters.aspectRatio')}
+          </Text>
+        </IAIInformationalPopover>
         <Spacer />
         <ParamAspectRatio />
         <IAIIconButton

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

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

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

@@ -1,5 +1,6 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
@@ -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));
-      }}
-    />
+    <IAIInformationalPopover details="compositingCoherenceSteps">
+      <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));
+        }}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
@@ -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));
-      }}
-    />
+    <IAIInformationalPopover details="compositingStrength">
+      <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));
+        }}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import { 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));
-      }}
-    />
+    <IAIInformationalPopover details="compositingBlur">
+      <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));
+        }}
+      />
+    </IAIInformationalPopover>
   );
 }

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

@@ -2,6 +2,7 @@ import { SelectItem } from '@mantine/core';
 import { RootState } from 'app/store/store';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { 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}
-    />
+    <IAIInformationalPopover details="compositingBlurMethod">
+      <IAIMantineSelect
+        value={maskBlurMethod}
+        onChange={handleMaskBlurMethodChange}
+        label={t('parameters.maskBlurMethod')}
+        data={maskBlurMethods}
+      />
+    </IAIInformationalPopover>
   );
 }

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

@@ -15,13 +15,19 @@ const ParamCompositingSettingsCollapse = () => {
   return (
     <IAICollapse label={t('parameters.compositingSettingsHeader')}>
       <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-        <SubParametersWrapper label={t('parameters.coherencePassHeader')}>
+        <SubParametersWrapper
+          label={t('parameters.coherencePassHeader')}
+          headerInfoPopover="compositingCoherencePass"
+        >
           <ParamCanvasCoherenceMode />
           <ParamCanvasCoherenceSteps />
           <ParamCanvasCoherenceStrength />
         </SubParametersWrapper>
         <Divider />
-        <SubParametersWrapper label={t('parameters.maskAdjustmentsHeader')}>
+        <SubParametersWrapper
+          label={t('parameters.maskAdjustmentsHeader')}
+          headerInfoPopover="compositingMaskAdjustments"
+        >
           <ParamMaskBlur />
           <ParamMaskBlurMethod />
         </SubParametersWrapper>

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

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { setInfillMethod } from 'features/parameters/store/generationSlice';
 
@@ -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}
-    />
+    <IAIInformationalPopover details="infillMethod">
+      <IAIMantineSelect
+        disabled={infill_methods?.length === 0}
+        placeholder={isLoading ? 'Loading...' : undefined}
+        label={t('parameters.infillMethod')}
+        value={infillMethod}
+        data={infill_methods ?? []}
+        onChange={handleChange}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

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

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

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
 import { setCfgScale } from 'features/parameters/store/generationSlice';
@@ -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}
-    />
+    <IAIInformationalPopover details="paramCFGScale">
+      <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}
+      />
+    </IAIInformationalPopover>
   ) : (
-    <IAINumberInput
-      label={t('parameters.cfgScale')}
-      step={0.5}
-      min={min}
-      max={inputMax}
-      onChange={handleChange}
-      value={cfgScale}
-      isInteger={false}
-      numberInputFieldProps={{ textAlign: 'center' }}
-    />
+    <IAIInformationalPopover details="paramCFGScale">
+      <IAINumberInput
+        label={t('parameters.cfgScale')}
+        step={0.5}
+        min={min}
+        max={inputMax}
+        onChange={handleChange}
+        value={cfgScale}
+        isInteger={false}
+        numberInputFieldProps={{ textAlign: 'center' }}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
 import { setIterations } from 'features/parameters/store/generationSlice';
@@ -60,29 +61,33 @@ const ParamIterations = ({ asSlider }: Props) => {
   }, [dispatch, initial]);
 
   return asSlider || shouldUseSliders ? (
-    <IAISlider
-      label={t('parameters.iterations')}
-      step={step}
-      min={min}
-      max={sliderMax}
-      onChange={handleChange}
-      handleReset={handleReset}
-      value={iterations}
-      withInput
-      withReset
-      withSliderMarks
-      sliderNumberInputProps={{ max: inputMax }}
-    />
+    <IAIInformationalPopover details="paramImages">
+      <IAISlider
+        label={t('parameters.iterations')}
+        step={step}
+        min={min}
+        max={sliderMax}
+        onChange={handleChange}
+        handleReset={handleReset}
+        value={iterations}
+        withInput
+        withReset
+        withSliderMarks
+        sliderNumberInputProps={{ max: inputMax }}
+      />
+    </IAIInformationalPopover>
   ) : (
-    <IAINumberInput
-      label={t('parameters.iterations')}
-      step={step}
-      min={min}
-      max={inputMax}
-      onChange={handleChange}
-      value={iterations}
-      numberInputFieldProps={{ textAlign: 'center' }}
-    />
+    <IAIInformationalPopover details="paramImages">
+      <IAINumberInput
+        label={t('parameters.iterations')}
+        step={step}
+        min={min}
+        max={inputMax}
+        onChange={handleChange}
+        value={iterations}
+        numberInputFieldProps={{ textAlign: 'center' }}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -9,6 +9,7 @@ import { ChangeEvent, KeyboardEvent, memo, useCallback, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const ParamNegativeConditioning = () => {
   const negativePrompt = useAppSelector(
@@ -81,18 +82,20 @@ const ParamNegativeConditioning = () => {
         onClose={onClose}
         onSelect={handleSelectEmbedding}
       >
-        <IAITextarea
-          id="negativePrompt"
-          name="negativePrompt"
-          ref={promptRef}
-          value={negativePrompt}
-          placeholder={t('parameters.negativePromptPlaceholder')}
-          onChange={handleChangePrompt}
-          resize="vertical"
-          fontSize="sm"
-          minH={16}
-          {...(isEmbeddingEnabled && { onKeyDown: handleKeyDown })}
-        />
+        <IAIInformationalPopover details="paramNegativeConditioning">
+          <IAITextarea
+            id="negativePrompt"
+            name="negativePrompt"
+            ref={promptRef}
+            value={negativePrompt}
+            placeholder={t('parameters.negativePromptPlaceholder')}
+            onChange={handleChangePrompt}
+            resize="vertical"
+            fontSize="sm"
+            minH={16}
+            {...(isEmbeddingEnabled && { onKeyDown: handleKeyDown })}
+          />
+        </IAIInformationalPopover>
       </ParamEmbeddingPopover>
       {!isOpen && isEmbeddingEnabled && (
         <Box

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

@@ -12,6 +12,7 @@ import { flushSync } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
+import IAIInformationalPopover from '../../../../../common/components/IAIInformationalPopover';
 
 const promptInputSelector = createSelector(
   [stateSelector],
@@ -109,17 +110,19 @@ const ParamPositiveConditioning = () => {
           onClose={onClose}
           onSelect={handleSelectEmbedding}
         >
-          <IAITextarea
-            id="prompt"
-            name="prompt"
-            ref={promptRef}
-            value={prompt}
-            placeholder={t('parameters.positivePromptPlaceholder')}
-            onChange={handleChangePrompt}
-            onKeyDown={handleKeyDown}
-            resize="vertical"
-            minH={32}
-          />
+          <IAIInformationalPopover details="paramPositiveConditioning">
+            <IAITextarea
+              id="prompt"
+              name="prompt"
+              ref={promptRef}
+              value={prompt}
+              placeholder={t('parameters.positivePromptPlaceholder')}
+              onChange={handleChangePrompt}
+              onKeyDown={handleKeyDown}
+              resize="vertical"
+              minH={32}
+            />
+          </IAIInformationalPopover>
         </ParamEmbeddingPopover>
       </FormControl>
       {!isOpen && isEmbeddingEnabled && (

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

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

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

@@ -16,6 +16,7 @@ import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
 import ParamAspectRatio, { mappedAspectRatios } from './ParamAspectRatio';
 import ParamHeight from './ParamHeight';
 import ParamWidth from './ParamWidth';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 
 const sizeOptsSelector = createSelector(
@@ -83,18 +84,20 @@ export default function ParamSize() {
       }}
     >
       <Flex alignItems="center" gap={2}>
-        <Text
-          sx={{
-            fontSize: 'sm',
-            width: 'full',
-            color: 'base.700',
-            _dark: {
-              color: 'base.300',
-            },
-          }}
-        >
-          {t('parameters.aspectRatio')}
-        </Text>
+        <IAIInformationalPopover details="paramRatio">
+          <Text
+            sx={{
+              fontSize: 'sm',
+              width: 'full',
+              color: 'base.700',
+              _dark: {
+                color: 'base.300',
+              },
+            }}
+          >
+            {t('parameters.aspectRatio')}
+          </Text>
+        </IAIInformationalPopover>
         <Spacer />
         <ParamAspectRatio />
         <IAIIconButton

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

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 
 import IAISlider from 'common/components/IAISlider';
@@ -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 }}
-    />
+    <IAIInformationalPopover details="paramSteps">
+      <IAISlider
+        label={t('parameters.steps')}
+        min={min}
+        max={sliderMax}
+        step={step}
+        onChange={handleChange}
+        handleReset={handleReset}
+        value={steps}
+        withInput
+        withReset
+        withSliderMarks
+        sliderNumberInputProps={{ max: inputMax }}
+      />
+    </IAIInformationalPopover>
   ) : (
-    <IAINumberInput
-      label={t('parameters.steps')}
-      min={min}
-      max={inputMax}
-      step={step}
-      onChange={handleChange}
-      value={steps}
-      numberInputFieldProps={{ textAlign: 'center' }}
-      onBlur={handleBlur}
-    />
+    <IAIInformationalPopover details="paramSteps">
+      <IAINumberInput
+        label={t('parameters.steps')}
+        min={min}
+        max={inputMax}
+        step={step}
+        onChange={handleChange}
+        value={steps}
+        numberInputFieldProps={{ textAlign: 'center' }}
+        onBlur={handleBlur}
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

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

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 IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 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>
+    <IAIInformationalPopover details="paramModel" placement="bottom">
+      <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>
+    </IAIInformationalPopover>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISwitch from 'common/components/IAISwitch';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
 import { ChangeEvent, useCallback } from 'react';
@@ -19,10 +20,12 @@ export const ParamCpuNoiseToggle = () => {
   );
 
   return (
-    <IAISwitch
-      label={t('parameters.useCpuNoise')}
-      isChecked={shouldUseCpuNoise}
-      onChange={handleChange}
-    />
+    <IAIInformationalPopover details="noiseUseCPU">
+      <IAISwitch
+        label={t('parameters.useCpuNoise')}
+        isChecked={shouldUseCpuNoise}
+        onChange={handleChange}
+      />
+    </IAIInformationalPopover>
   );
 };

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 IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const ParamSeedFull = () => {
   return (
-    <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
-      <ParamSeed />
-      <ParamSeedShuffle />
-      <ParamSeedRandomize />
-    </Flex>
+    <IAIInformationalPopover details="paramSeed">
+      <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
+        <ParamSeed />
+        <ParamSeedShuffle />
+        <ParamSeedRandomize />
+      </Flex>
+    </IAIInformationalPopover>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx

@@ -1,9 +1,11 @@
 import { Flex, Text } from '@chakra-ui/react';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import { ReactNode, memo } from 'react';
 
 type SubParameterWrapperProps = {
   children: ReactNode | ReactNode[];
   label?: string;
+  headerInfoPopover?: string;
 };
 
 const SubParametersWrapper = (props: SubParameterWrapperProps) => (
@@ -21,7 +23,18 @@ const SubParametersWrapper = (props: SubParameterWrapperProps) => (
       },
     }}
   >
-    {props.label && (
+    {props.headerInfoPopover && props.label && (
+      <IAIInformationalPopover details={props.headerInfoPopover}>
+        <Text
+          fontSize="sm"
+          fontWeight="bold"
+          sx={{ color: 'base.600', _dark: { color: 'base.300' } }}
+        >
+          {props.label}
+        </Text>
+      </IAIInformationalPopover>
+    )}
+    {!props.headerInfoPopover && props.label && (
       <Text
         fontSize="sm"
         fontWeight="bold"

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 IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 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
-    />
+    <IAIInformationalPopover details="paramVAE">
+      <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
+      />
+    </IAIInformationalPopover>
   );
 };
 

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

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

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 IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 
 const selector = createSelector(
   [stateSelector],
@@ -36,19 +37,21 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
 
   return (
     <SubParametersWrapper>
-      <IAISlider
-        label={t('sdxl.denoisingStrength')}
-        step={0.01}
-        min={0}
-        max={1}
-        onChange={handleChange}
-        handleReset={handleReset}
-        value={sdxlImg2ImgDenoisingStrength}
-        isInteger={false}
-        withInput
-        withSliderMarks
-        withReset
-      />
+      <IAIInformationalPopover details="paramDenoisingStrength">
+        <IAISlider
+          label={t('sdxl.denoisingStrength')}
+          step={0.01}
+          min={0}
+          max={1}
+          onChange={handleChange}
+          handleReset={handleReset}
+          value={sdxlImg2ImgDenoisingStrength}
+          isInteger={false}
+          withInput
+          withSliderMarks
+          withReset
+        />
+      </IAIInformationalPopover>
     </SubParametersWrapper>
   );
 };

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -23,6 +23,7 @@ import {
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
+  setShouldDisableInformationalPopovers,
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
   shouldUseNSFWCheckerChanged,
@@ -66,6 +67,7 @@ const selector = createSelector(
       shouldAntialiasProgressImage,
       shouldUseNSFWChecker,
       shouldUseWatermarker,
+      shouldDisableInformationalPopovers,
     } = system;
 
     const {
@@ -85,6 +87,7 @@ const selector = createSelector(
       shouldUseNSFWChecker,
       shouldUseWatermarker,
       shouldAutoChangeDimensions,
+      shouldDisableInformationalPopovers,
     };
   },
   {
@@ -158,6 +161,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     shouldUseNSFWChecker,
     shouldUseWatermarker,
     shouldAutoChangeDimensions,
+    shouldDisableInformationalPopovers,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -307,6 +311,15 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     onChange={handleLanguageChanged}
                   />
                 )}
+                <SettingSwitch
+                  label="Disable informational popovers"
+                  isChecked={shouldDisableInformationalPopovers}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    dispatch(
+                      setShouldDisableInformationalPopovers(e.target.checked)
+                    )
+                  }
+                />
               </StyledFlex>
 
               {shouldShowDeveloperSettings && (

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -35,6 +35,7 @@ export const initialSystemState: SystemState = {
   language: 'en',
   shouldUseNSFWChecker: false,
   shouldUseWatermarker: false,
+  shouldDisableInformationalPopovers: false,
   status: 'DISCONNECTED',
 };
 
@@ -75,6 +76,12 @@ export const systemSlice = createSlice({
     shouldUseWatermarkerChanged(state, action: PayloadAction<boolean>) {
       state.shouldUseWatermarker = action.payload;
     },
+    setShouldDisableInformationalPopovers(
+      state,
+      action: PayloadAction<boolean>
+    ) {
+      state.shouldDisableInformationalPopovers = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -234,6 +241,7 @@ export const {
   languageChanged,
   shouldUseNSFWCheckerChanged,
   shouldUseWatermarkerChanged,
+  setShouldDisableInformationalPopovers,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;

invokeai/frontend/web/src/features/system/store/types.ts

@@ -33,6 +33,7 @@ export interface SystemState {
   shouldUseNSFWChecker: boolean;
   shouldUseWatermarker: boolean;
   status: SystemStatus;
+  shouldDisableInformationalPopovers: boolean;
 }
 
 export const LANGUAGES = {

invokeai/frontend/web/src/theme/components/button.ts

@@ -80,6 +80,13 @@ const invokeAIOutline = defineStyle((props) => {
   return {
     border: '1px solid',
     borderColor: c === 'gray' ? borderColor : 'currentColor',
+    _hover: {
+      bg: mode(`${c}.500`, `${c}.500`)(props),
+      color: mode('white', `base.50`)(props),
+      svg: {
+        fill: mode('white', `base.50`)(props),
+      },
+    },
     '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)':
       {
         marginEnd: '-1px',

invokeai/frontend/web/src/theme/components/popover.ts

@@ -29,13 +29,34 @@ const invokeAIContent = defineStyle((props) => {
   };
 });
 
+const informationalContent = defineStyle((props) => {
+  return {
+    [$arrowBg.variable]: mode('colors.base.100', 'colors.base.600')(props),
+    [$popperBg.variable]: mode('colors.base.100', 'colors.base.600')(props),
+    [$arrowShadowColor.variable]: mode(
+      'colors.base.400',
+      'colors.base.400'
+    )(props),
+    p: 0,
+    bg: mode('base.100', 'base.600')(props),
+    border: 'none',
+    shadow: 'dark-lg',
+  };
+});
+
 const invokeAI = definePartsStyle((props) => ({
   content: invokeAIContent(props),
 }));
 
+const informational = definePartsStyle((props) => ({
+  content: informationalContent(props),
+  body: { padding: 0 },
+}));
+
 export const popoverTheme = defineMultiStyleConfig({
   variants: {
     invokeAI,
+    informational,
   },
   defaultProps: {
     variant: 'invokeAI',