updated tooltip popovers

2024-08-30 20:32:17 +00:00 · 2024-02-19 12:50:11 -05:00 · 2024-02-19 12:50:11 -05:00 · f0d4c71960
commit f0d4c71960
parent f36b5990ed
23 changed files with 224 additions and 65 deletions
--- a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
+++ b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
@ -13,28 +13,46 @@ export type Feature =
  | 'compositingCoherenceSteps'
  | 'compositingStrength'
  | 'compositingMaskAdjustments'
+  | 'controlNet'
  | 'controlNetBeginEnd'
  | 'controlNetControlMode'
+  | 'controlNetProcessor'
  | 'controlNetResizeMode'
-  | 'controlNet'
  | 'controlNetWeight'
  | 'dynamicPrompts'
  | 'dynamicPromptsMaxPrompts'
  | 'dynamicPromptsSeedBehaviour'
+  | 'imageFit'
  | 'infillMethod'
  | 'lora'
+  | 'loraWeight'
  | 'noiseUseCPU'
+  | 'paramAspect'
  | 'paramCFGScale'
  | 'paramCFGRescaleMultiplier'
  | 'paramDenoisingStrength'
+  | 'paramHeight'
+  | 'paramHrf'
  | 'paramIterations'
  | 'paramModel'
  | 'paramRatio'
  | 'paramSeed'
  | 'paramSteps'
+  | 'paramUpscaleMethod'
  | 'paramVAE'
  | 'paramVAEPrecision'
-  | 'scaleBeforeProcessing';
+  | 'paramWidth'
+  | 'patchmatchDownScaleSize'
+  | 'refinerModel'
+  | 'refinerNegativeAestheticScore'
+  | 'refinerPositiveAestheticScore'
+  | 'refinerScheduler'
+  | 'refinerStart'
+  | 'refinerSteps'
+  | 'refinerCfgScale'
+  | 'scaleBeforeProcessing'
+  | 'seamlessTilingXAxis'
+  | 'seamlessTilingYAxis';

 export type PopoverData = PopoverProps & {
  image?: string;
@ -46,21 +64,57 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
  paramNegativeConditioning: {
    placement: 'right',
  },
+  clipSkip: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178161-advanced-settings',
+  },
  controlNet: {
    href: 'https://support.invoke.ai/support/solutions/articles/151000105880',
  },
+  controlNetBeginEnd: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178148',
+  },
+  controlNetWeight: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178148',
+  },
  lora: {
    href: 'https://support.invoke.ai/support/solutions/articles/151000159072',
  },
+  loraWeight: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000159072-concepts-low-rank-adaptations-loras-',
+  },
+  compositingBlur: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
+  },
+  compositingBlurMethod: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
+  },
  compositingCoherenceMode: {
-    href: 'https://support.invoke.ai/support/solutions/articles/151000158838',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
+  },
+  compositingCoherenceSteps: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
+  },
+  compositingStrength: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
  },
  infillMethod: {
-    href: 'https://support.invoke.ai/support/solutions/articles/151000158841',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158841-infill-and-scaling',
  },
  scaleBeforeProcessing: {
    href: 'https://support.invoke.ai/support/solutions/articles/151000158841',
  },
+  paramCFGScale: {
+    href: 'https://www.youtube.com/watch?v=1OeHEJrsTpI',
+  },
+  paramCFGRescaleMultiplier: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178161-advanced-settings',
+  },
+  paramDenoisingStrength: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000094998-image-to-image',
+  },
+  paramHrf: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000096700-how-can-i-get-larger-images-what-does-upscaling-do-',
+  },
  paramIterations: {
    href: 'https://support.invoke.ai/support/solutions/articles/151000159073',
  },
@ -70,7 +124,10 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
  },
  paramScheduler: {
    placement: 'right',
-    href: 'https://support.invoke.ai/support/solutions/articles/151000159073',
+    href: 'https://www.youtube.com/watch?v=1OeHEJrsTpI',
+  },
+  paramSeed: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000096684-what-is-a-seed-how-do-i-use-it-to-recreate-the-same-image-',
  },
  paramModel: {
    placement: 'right',
@ -81,15 +138,53 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
  },
  controlNetControlMode: {
    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178148',
+  },
+  controlNetProcessor: {
+    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000105880-using-controlnet',
  },
  controlNetResizeMode: {
    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178148',
  },
  paramVAE: {
    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178161-advanced-settings',
  },
  paramVAEPrecision: {
    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178161-advanced-settings',
+  },
+  paramUpscaleMethod: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000096700-how-can-i-get-larger-images-what-does-upscaling-do-',
+  },
+  refinerModel: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  refinerNegativeAestheticScore: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  refinerPositiveAestheticScore: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  refinerScheduler: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  refinerStart: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  refinerSteps: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  refinerCfgScale: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178333-using-the-refiner',
+  },
+  seamlessTilingXAxis: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178161-advanced-settings',
+  },
+  seamlessTilingYAxis: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000178161-advanced-settings',
  },
 } as const;

--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
@ -1,5 +1,6 @@
 import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import {
@ -61,12 +62,10 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => {
  }

  return (
-    <FormControl
-      isDisabled={!isEnabled}
-      // feature="controlNetBeginEnd"
-      orientation="vertical"
-    >
+    <FormControl isDisabled={!isEnabled} orientation="vertical">
+      <InformationalPopover feature="controlNetBeginEnd">
        <FormLabel>{t('controlnet.beginEndStepPercent')}</FormLabel>
+      </InformationalPopover>
      <CompositeRangeSlider
        aria-label={ariaLabel}
        value={value}
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
@ -2,6 +2,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterProcessorNode } from 'features/controlAdapters/hooks/useControlAdapterProcessorNode';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
@ -58,7 +59,9 @@ const ParamControlAdapterProcessorSelect = ({ id }: Props) => {
  }
  return (
    <FormControl isDisabled={!isEnabled}>
+      <InformationalPopover feature="controlNetProcessor">
        <FormLabel>{t('controlnet.processor')}</FormLabel>
+      </InformationalPopover>
      <Combobox value={value} options={options} onChange={onChange} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
@ -1,6 +1,7 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setHrfMethod } from 'features/hrf/store/hrfSlice';
 import { isParameterHRFMethod } from 'features/parameters/types/parameterSchemas';
 import { memo, useCallback, useMemo } from 'react';
@ -30,7 +31,9 @@ const ParamHrfMethodSelect = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="paramUpscaleMethod">
        <FormLabel>{t('hrf.upscaleMethod')}</FormLabel>
+      </InformationalPopover>
      <Combobox value={value} options={options} onChange={onChange} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setHrfStrength } from 'features/hrf/store/hrfSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@ -25,7 +26,9 @@ const ParamHrfStrength = () => {

  return (
    <FormControl>
-      <FormLabel>{t('parameters.denoisingStrength')}</FormLabel>
+      <InformationalPopover feature="paramDenoisingStrength">
+        <FormLabel>{`${t('parameters.denoisingStrength')}`}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        min={sliderMin}
        max={sliderMax}
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
@ -1,5 +1,6 @@
 import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setHrfEnabled } from 'features/hrf/store/hrfSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@ -18,7 +19,9 @@ const ParamHrfToggle = () => {

  return (
    <FormControl w="full">
+      <InformationalPopover feature="paramHrf">
        <FormLabel flexGrow={1}>{t('hrf.enableHrf')}</FormLabel>
+      </InformationalPopover>
      <Switch isChecked={hrfEnabled} onChange={handleHrfEnabled} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
@ -10,6 +10,7 @@ import {
  Text,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import { loraIsEnabledChanged, loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice';
 import { memo, useCallback } from 'react';
@ -57,6 +58,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
          </Flex>
        </Flex>
      </CardHeader>
+      <InformationalPopover feature="loraWeight">
        <CardBody>
          <CompositeSlider
            value={lora.weight}
@ -80,6 +82,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
            isDisabled={!lora.isEnabled}
          />
        </CardBody>
+      </InformationalPopover>
    </Card>
  );
 });
--- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
@ -2,6 +2,7 @@ import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { loraAdded, selectLoraSlice } from 'features/lora/store/loraSlice';
 import { memo, useCallback, useMemo } from 'react';
@ -57,7 +58,9 @@ const LoRASelect = () => {

  return (
    <FormControl isDisabled={!options.length}>
+      <InformationalPopover feature="lora">
        <FormLabel>{t('models.lora')} </FormLabel>
+      </InformationalPopover>
      <Combobox
        placeholder={placeholder}
        value={null}
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setInfillPatchmatchDownscaleSize } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@ -27,7 +28,9 @@ const ParamInfillPatchmatchDownscaleSize = () => {

  return (
    <FormControl isDisabled={infillMethod !== 'patchmatch'}>
+      <InformationalPopover feature="patchmatchDownScaleSize">
        <FormLabel>{t('parameters.patchmatchDownScaleSize')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        min={sliderMin}
        max={sliderMax}
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { memo, useCallback, useMemo } from 'react';
@ -27,7 +28,9 @@ export const ParamHeight = memo(() => {

  return (
    <FormControl>
+      <InformationalPopover feature="paramHeight">
        <FormLabel>{t('parameters.height')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        value={ctx.height}
        defaultValue={optimalDimension}
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { memo, useCallback, useMemo } from 'react';
@ -27,7 +28,9 @@ export const ParamWidth = memo(() => {

  return (
    <FormControl>
+      <InformationalPopover feature="paramWidth">
        <FormLabel>{t('parameters.width')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        value={ctx.width}
        onChange={onChange}
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
@ -1,6 +1,7 @@
 import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import type { SingleValue } from 'chakra-react-select';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { ASPECT_RATIO_OPTIONS } from 'features/parameters/components/ImageSize/constants';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { isAspectRatioID } from 'features/parameters/components/ImageSize/types';
@ -28,7 +29,9 @@ export const AspectRatioSelect = memo(() => {

  return (
    <FormControl>
+      <InformationalPopover feature="paramAspect">
        <FormLabel>{t('parameters.aspect')}</FormLabel>
+      </InformationalPopover>
      <Combobox value={value} onChange={onChange} options={ASPECT_RATIO_OPTIONS} sx={selectStyles} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
@ -1,6 +1,7 @@
 import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setShouldFitToWidthHeight } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@ -22,7 +23,9 @@ const ImageToImageFit = () => {

  return (
    <FormControl w="full">
+      <InformationalPopover feature="imageFit">
        <FormLabel flexGrow={1}>{t('parameters.imageFit')}</FormLabel>
+      </InformationalPopover>
      <Switch isChecked={shouldFitToWidthHeight} onChange={handleChangeFit} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@ -1,6 +1,7 @@
-import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { modelSelected } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
@ -41,9 +42,12 @@ const ParamMainModelSelect = () => {
  });

  return (
-    <Tooltip label={tooltipLabel}>
    <FormControl isDisabled={!options.length} isInvalid={!options.length}>
+      <InformationalPopover feature="paramModel">
        <FormLabel>{t('modelManager.model')}</FormLabel>
+      </InformationalPopover>
+      <Tooltip label={tooltipLabel}>
+        <Box w="full">
          <Combobox
            value={value}
            placeholder={placeholder}
@ -51,8 +55,9 @@ const ParamMainModelSelect = () => {
            onChange={onChange}
            noOptionsMessage={noOptionsMessage}
          />
-      </FormControl>
+        </Box>
      </Tooltip>
+    </FormControl>
  );
 };

--- a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx
@ -1,5 +1,6 @@
 import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setSeamlessXAxis } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@ -20,7 +21,9 @@ const ParamSeamlessXAxis = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="seamlessTilingXAxis">
        <FormLabel>{t('parameters.seamlessXAxis')}</FormLabel>
+      </InformationalPopover>
      <Switch isChecked={seamlessXAxis} onChange={handleChange} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx
@ -1,5 +1,6 @@
 import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setSeamlessYAxis } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@ -18,7 +19,9 @@ const ParamSeamlessYAxis = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="seamlessTilingYAxis">
        <FormLabel>{t('parameters.seamlessYAxis')}</FormLabel>
+      </InformationalPopover>
      <Switch isChecked={seamlessYAxis} onChange={handleChange} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@ -21,7 +22,9 @@ const ParamSDXLRefinerCFGScale = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="refinerCfgScale">
        <FormLabel>{t('sdxl.cfgScale')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        value={refinerCFGScale}
        defaultValue={initial}
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
@ -1,6 +1,7 @@
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { refinerModelChanged, selectSdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
@ -43,7 +44,9 @@ const ParamSDXLRefinerModelSelect = () => {
  });
  return (
    <FormControl isDisabled={!options.length} isInvalid={!options.length}>
+      <InformationalPopover feature="refinerModel">
        <FormLabel>{t('sdxl.refinermodel')}</FormLabel>
+      </InformationalPopover>
      <Combobox
        value={value}
        placeholder={placeholder}
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@ -14,7 +15,9 @@ const ParamSDXLRefinerNegativeAestheticScore = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="refinerNegativeAestheticScore">
        <FormLabel>{t('sdxl.negAestheticScore')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        min={1}
        max={10}
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@ -13,7 +14,9 @@ const ParamSDXLRefinerPositiveAestheticScore = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="refinerPositiveAestheticScore">
        <FormLabel>{t('sdxl.posAestheticScore')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        step={0.5}
        min={1}
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
@ -1,6 +1,7 @@
 import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
 import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
 import { setRefinerScheduler } from 'features/sdxl/store/sdxlSlice';
@ -26,7 +27,9 @@ const ParamSDXLRefinerScheduler = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="refinerScheduler">
        <FormLabel>{t('sdxl.scheduler')}</FormLabel>
+      </InformationalPopover>
      <Combobox value={value} options={SCHEDULER_OPTIONS} onChange={onChange} />
    </FormControl>
  );
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@ -12,7 +13,9 @@ const ParamSDXLRefinerStart = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="refinerStart">
        <FormLabel>{t('sdxl.refinerStart')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        step={0.01}
        min={0}
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@ -27,7 +28,9 @@ const ParamSDXLRefinerSteps = () => {

  return (
    <FormControl>
+      <InformationalPopover feature="refinerSteps">
        <FormLabel>{t('sdxl.steps')}</FormLabel>
+      </InformationalPopover>
      <CompositeSlider
        value={refinerSteps}
        defaultValue={initial}