remove individual popover components

2026-04-01 03:01:13 -04:00 · 2023-09-15 14:36:36 -04:00
parent 7bf7c16a5d
commit 45d5ab20ec
60 changed files with 117 additions and 584 deletions
--- 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,7 +1,7 @@
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { ClipSkipPopover } from 'features/informationalPopovers/components/clipSkip';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
 import { clipSkipMap } from 'features/parameters/types/constants';
 import { useCallback, useMemo } from 'react';
@@ -43,7 +43,7 @@ export default function ParamClipSkip() {
  }, [model]);

  return (
-    <ClipSkipPopover>
+    <IAIInformationalPopover details="clipSkip">
      <IAISlider
        label={t('parameters.clipSkip')}
        aria-label={t('parameters.clipSkip')}
@@ -58,6 +58,6 @@ export default function ParamClipSkip() {
        withReset
        handleReset={handleClipSkipReset}
      />
-    </ClipSkipPopover>
+    </IAIInformationalPopover>
  );
 }
--- 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
@@ -1,8 +1,8 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import { IAISelectDataType } from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { CompositingModePopover } from 'features/informationalPopovers/components/compositingMode';
 import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
 import { CanvasCoherenceModeParam } from 'features/parameters/types/parameterSchemas';

@@ -31,14 +31,14 @@ const ParamCanvasCoherenceMode = () => {
  };

  return (
-    <CompositingModePopover>
+    <IAIInformationalPopover details="compositingCoherenceMode">
      <IAIMantineSelect
        label={t('parameters.coherenceMode')}
        data={coherenceModeSelectData}
        value={canvasCoherenceMode}
        onChange={handleCoherenceModeChange}
      />
-    </CompositingModePopover>
+    </IAIInformationalPopover>
  );
 };

--- 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,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { CompositingStepsPopover } from 'features/informationalPopovers/components/compositingSteps';
 import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ const ParamCanvasCoherenceSteps = () => {
  const { t } = useTranslation();

  return (
-    <CompositingStepsPopover>
+    <IAIInformationalPopover details="compositingCoherenceSteps">
      <IAISlider
        label={t('parameters.coherenceSteps')}
        min={1}
@@ -32,7 +32,7 @@ const ParamCanvasCoherenceSteps = () => {
          dispatch(setCanvasCoherenceSteps(20));
        }}
      />
-    </CompositingStepsPopover>
+    </IAIInformationalPopover>
  );
 };

--- 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,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { CompositingStrengthPopover } from 'features/informationalPopovers/components/compositingStrength';
 import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ const ParamCanvasCoherenceStrength = () => {
  const { t } = useTranslation();

  return (
-    <CompositingStrengthPopover>
+    <IAIInformationalPopover details="compositingStrength">
      <IAISlider
        label={t('parameters.coherenceStrength')}
        min={0}
@@ -32,7 +32,7 @@ const ParamCanvasCoherenceStrength = () => {
          dispatch(setCanvasCoherenceStrength(0.3));
        }}
      />
-    </CompositingStrengthPopover>
+    </IAIInformationalPopover>
  );
 };

--- 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,7 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
-import { CompositingBlurPopover } from 'features/informationalPopovers/components/compositingBlur';
 import { setMaskBlur } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';

@@ -13,7 +13,7 @@ export default function ParamMaskBlur() {
  const { t } = useTranslation();

  return (
-    <CompositingBlurPopover>
+    <IAIInformationalPopover details="compositingBlur">
      <IAISlider
        label={t('parameters.maskBlur')}
        min={0}
@@ -30,6 +30,6 @@ export default function ParamMaskBlur() {
          dispatch(setMaskBlur(16));
        }}
      />
-    </CompositingBlurPopover>
+    </IAIInformationalPopover>
  );
 }
--- 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
@@ -2,8 +2,8 @@ import { SelectItem } from '@mantine/core';
 import { RootState } from 'app/store/store';

 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { CompositingBlurMethodPopover } from 'features/informationalPopovers/components/compositingBlurMethod';
 import { setMaskBlurMethod } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';

@@ -29,13 +29,13 @@ export default function ParamMaskBlurMethod() {
  };

  return (
-    <CompositingBlurMethodPopover>
+    <IAIInformationalPopover details="compositingBlur">
      <IAIMantineSelect
        value={maskBlurMethod}
        onChange={handleMaskBlurMethodChange}
        label={t('parameters.maskBlurMethod')}
        data={maskBlurMethods}
      />
-    </CompositingBlurMethodPopover>
+    </IAIInformationalPopover>
  );
 }
--- 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
@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { InfillMethodPopover } from 'features/informationalPopovers/components/infillMethod';
 import { setInfillMethod } from 'features/parameters/store/generationSlice';

 import { memo, useCallback } from 'react';
@@ -40,7 +40,7 @@ const ParamInfillMethod = () => {
  );

  return (
-    <InfillMethodPopover>
+    <IAIInformationalPopover details="infillMethod">
      <IAIMantineSelect
        disabled={infill_methods?.length === 0}
        placeholder={isLoading ? 'Loading...' : undefined}
@@ -49,7 +49,7 @@ const ParamInfillMethod = () => {
        data={infill_methods ?? []}
        onChange={handleChange}
      />
-    </InfillMethodPopover>
+    </IAIInformationalPopover>
  );
 };

--- 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
@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
@@ -8,7 +9,6 @@ import {
  BOUNDING_BOX_SCALES_DICT,
  BoundingBoxScale,
 } from 'features/canvas/store/canvasTypes';
-import { ScaleBeforeProcessingPopover } from 'features/informationalPopovers/components/scaleBeforeProcessing';

 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -36,14 +36,14 @@ const ParamScaleBeforeProcessing = () => {
  };

  return (
-    <ScaleBeforeProcessingPopover>
+    <IAIInformationalPopover details="scaleBeforeProcessing">
      <IAIMantineSearchableSelect
        label={t('parameters.scaleBeforeProcessing')}
        data={BOUNDING_BOX_SCALES_DICT}
        value={boundingBoxScale}
        onChange={handleChangeBoundingBoxScaleMethod}
      />
-    </ScaleBeforeProcessingPopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx
@@ -2,9 +2,9 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
-import { ParamCFGScalePopover } from 'features/informationalPopovers/components/paramCFGScale';
 import { setCfgScale } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -54,7 +54,7 @@ const ParamCFGScale = () => {
  );

  return shouldUseSliders ? (
-    <ParamCFGScalePopover>
+    <IAIInformationalPopover details="paramCFGScale">
      <IAISlider
        label={t('parameters.cfgScale')}
        step={shift ? 0.1 : 0.5}
@@ -69,9 +69,9 @@ const ParamCFGScale = () => {
        withSliderMarks
        isInteger={false}
      />
-    </ParamCFGScalePopover>
+    </IAIInformationalPopover>
  ) : (
-    <ParamCFGScalePopover>
+    <IAIInformationalPopover details="paramCFGScale">
      <IAINumberInput
        label={t('parameters.cfgScale')}
        step={0.5}
@@ -82,7 +82,7 @@ const ParamCFGScale = () => {
        isInteger={false}
        numberInputFieldProps={{ textAlign: 'center' }}
      />
-    </ParamCFGScalePopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx
@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
 import { ParamImagesPopover } from 'features/informationalPopovers/components/paramImages';
@@ -61,7 +62,7 @@ const ParamIterations = () => {
  }, [dispatch, initial]);

  return shouldUseSliders ? (
-    <ParamImagesPopover>
+    <IAIInformationalPopover details="paramImages">
      <IAISlider
        isDisabled={isDisabled}
        label={t('parameters.images')}
@@ -76,9 +77,9 @@ const ParamIterations = () => {
        withSliderMarks
        sliderNumberInputProps={{ max: inputMax }}
      />
-    </ParamImagesPopover>
+    </IAIInformationalPopover>
  ) : (
-    <ParamImagesPopover>
+    <IAIInformationalPopover details="paramImages">
      <IAINumberInput
        isDisabled={isDisabled}
        label={t('parameters.images')}
@@ -89,7 +90,7 @@ const ParamIterations = () => {
        value={iterations}
        numberInputFieldProps={{ textAlign: 'center' }}
      />
-    </ParamImagesPopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
@@ -29,7 +29,6 @@ import { useTranslation } from 'react-i18next';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
 import IAIInformationalPopover from '../../../../../common/components/IAIInformationalPopover';
 import InvokeAILogoImage from 'assets/images/logo.png';
-import { ParamPositiveConditioningPopover } from '../../../../informationalPopovers/components/paramPositiveConditioning';

 const promptInputSelector = createSelector(
  [stateSelector, activeTabNameSelector],
@@ -139,7 +138,7 @@ const ParamPositiveConditioning = () => {
          onClose={onClose}
          onSelect={handleSelectEmbedding}
        >
-          <ParamPositiveConditioningPopover>
+          <IAIInformationalPopover details="paramPositiveConditioning">
            <IAITextarea
              id="prompt"
              name="prompt"
@@ -151,7 +150,7 @@ const ParamPositiveConditioning = () => {
              resize="vertical"
              minH={32}
            />
-          </ParamPositiveConditioningPopover>
+          </IAIInformationalPopover>
        </ParamEmbeddingPopover>
      </FormControl>
      {!isOpen && isEmbeddingEnabled && (
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
@@ -1,8 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
-import { ParamSchedulerPopover } from 'features/informationalPopovers/components/paramScheduler';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
 import {
@@ -52,14 +52,14 @@ const ParamScheduler = () => {
  );

  return (
-    <ParamSchedulerPopover>
+    <IAIInformationalPopover details="paramScheduler">
      <IAIMantineSearchableSelect
        label={t('parameters.scheduler')}
        value={scheduler}
        data={data}
        onChange={handleChange}
      />
-    </ParamSchedulerPopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx
@@ -2,10 +2,10 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAINumberInput from 'common/components/IAINumberInput';

 import IAISlider from 'common/components/IAISlider';
-import { ParamStepsPopover } from 'features/informationalPopovers/components/paramSteps';
 import {
  clampSymmetrySteps,
  setSteps,
@@ -57,7 +57,7 @@ const ParamSteps = () => {
  }, [dispatch]);

  return shouldUseSliders ? (
-    <ParamStepsPopover>
+    <IAIInformationalPopover details="paramSteps">
      <IAISlider
        label={t('parameters.steps')}
        min={min}
@@ -71,9 +71,9 @@ const ParamSteps = () => {
        withSliderMarks
        sliderNumberInputProps={{ max: inputMax }}
      />
-    </ParamStepsPopover>
+    </IAIInformationalPopover>
  ) : (
-    <ParamStepsPopover>
+    <IAIInformationalPopover details="paramSteps">
      <IAINumberInput
        label={t('parameters.steps')}
        min={min}
@@ -84,7 +84,7 @@ const ParamSteps = () => {
        numberInputFieldProps={{ textAlign: 'center' }}
        onBlur={handleBlur}
      />
-    </ParamStepsPopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx
+++ b/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>
  );
 };
--- 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,7 +21,7 @@ import {
  useGetOnnxModelsQuery,
 } from 'services/api/endpoints/models';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
-import { ParamModelPopover } from 'features/informationalPopovers/components/paramModel';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';

 const selector = createSelector(
  stateSelector,
@@ -119,7 +119,7 @@ const ParamMainModelSelect = () => {
      data={[]}
    />
  ) : (
-    <ParamModelPopover>
+    <IAIInformationalPopover details="paramModel" placement="bottom">
      <Flex w="100%" alignItems="center" gap={3}>
        <IAIMantineSearchableSelect
          tooltip={selectedModel?.description}
@@ -140,7 +140,7 @@ const ParamMainModelSelect = () => {
          </Box>
        )}
      </Flex>
-    </ParamModelPopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAISwitch from 'common/components/IAISwitch';
-import { NoiseUseCPUPopover } from 'features/informationalPopovers/components/noiseUseCPU';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,13 +29,13 @@ export const ParamCpuNoiseToggle = () => {
    dispatch(shouldUseCpuNoiseChanged(e.target.checked));

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

  return (
-    <NoiseEnablePopover>
+    <IAIInformationalPopover details="noiseEnable">
      <IAISwitch
        label={t('parameters.enableNoiseSettings')}
        isChecked={shouldUseNoiseSettings}
        onChange={handleChange}
      />
-    </NoiseEnablePopover>
+    </IAIInformationalPopover>
  );
 };
--- 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,17 +3,17 @@ import { memo } from 'react';
 import ParamSeed from './ParamSeed';
 import ParamSeedShuffle from './ParamSeedShuffle';
 import ParamSeedRandomize from './ParamSeedRandomize';
-import { ParamSeedPopover } from 'features/informationalPopovers/components/paramSeed';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';

 const ParamSeedFull = () => {
  return (
-    <ParamSeedPopover>
+    <IAIInformationalPopover details="paramSeed">
      <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
        <ParamSeed />
        <ParamSeedShuffle />
        <ParamSeedRandomize />
      </Flex>
-    </ParamSeedPopover>
+    </IAIInformationalPopover>
  );
 };

--- 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,7 +15,7 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI
 import { vaeSelected } from 'features/parameters/store/generationSlice';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToVAEModelParam } from 'features/parameters/util/modelIdToVAEModelParam';
-import { ParamVAEPopover } from 'features/informationalPopovers/components/paramVAE';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';

 const selector = createSelector(
  stateSelector,
@@ -94,7 +94,7 @@ const ParamVAEModelSelect = () => {
  );

  return (
-    <ParamVAEPopover>
+    <IAIInformationalPopover details="paramVAE">
      <IAIMantineSearchableSelect
        itemComponent={IAIMantineSelectItemWithTooltip}
        tooltip={selectedVaeModel?.description}
@@ -106,7 +106,7 @@ const ParamVAEModelSelect = () => {
        disabled={data.length === 0}
        clearable
      />
-    </ParamVAEPopover>
+    </IAIInformationalPopover>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx
@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { ParamVAEPrecisionPopover } from 'features/informationalPopovers/components/paramVAEPrecision';
 import { vaePrecisionChanged } from 'features/parameters/store/generationSlice';
 import { PrecisionParam } from 'features/parameters/types/parameterSchemas';
 import { memo, useCallback } from 'react';
@@ -35,14 +35,14 @@ const ParamVAEModelSelect = () => {
  );

  return (
-    <ParamVAEPrecisionPopover>
+    <IAIInformationalPopover details="paramVAEPrecision">
      <IAIMantineSelect
        label="VAE Precision"
        value={vaePrecision}
        data={DATA}
        onChange={handleChange}
      />
-    </ParamVAEPrecisionPopover>
+    </IAIInformationalPopover>
  );
 };