From 8e93b7adc4e0cbe823eeb079476f3f02331a41b0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 16 Feb 2026 22:17:57 +0000 Subject: [PATCH 1/3] fix(frontend) Make informational tooltips respect the shouldEnableInformationalPopovers setting Co-authored-by: lstein <111189+lstein@users.noreply.github.com> --- .../web/src/common/components/IAITooltip.tsx | 22 +++++++ .../src/common/components/IconMenuItem.tsx | 7 ++- .../EntityListGlobalActionBarAddLayerMenu.tsx | 24 +++---- ...SelectedEntityActionBarDuplicateButton.tsx | 22 ++++--- .../EntityListSelectedEntityActionBarFill.tsx | 10 +-- ...istSelectedEntityActionBarFilterButton.tsx | 22 ++++--- ...electedEntityActionBarInvertMaskButton.tsx | 22 ++++--- ...ectedEntityActionBarSaveToAssetsButton.tsx | 22 ++++--- ...ectedEntityActionBarSelectObjectButton.tsx | 22 ++++--- ...SelectedEntityActionBarTransformButton.tsx | 22 ++++--- ...vasOperationIsolatedLayerPreviewSwitch.tsx | 7 ++- .../ControlLayerControlAdapterModel.tsx | 7 ++- .../RasterLayerExportPSDButton.tsx | 22 ++++--- .../components/RefImage/RefImageHeader.tsx | 62 ++++++++++--------- .../components/RefImage/RefImageModel.tsx | 7 ++- .../components/RefImage/RefImagePreview.tsx | 7 ++- .../RegionalReferenceImageModel.tsx | 7 ++- .../SelectObject/SelectObjectInfoTooltip.tsx | 7 ++- .../StagingArea/QueueItemCircularProgress.tsx | 7 ++- .../StagingAreaAutoSwitchButtons.tsx | 52 +++++++++------- .../StagingAreaToolbarAcceptButton.tsx | 20 +++--- .../StagingAreaToolbarDiscardAllButton.tsx | 20 +++--- ...tagingAreaToolbarDiscardSelectedButton.tsx | 20 +++--- .../components/Tool/ToolBboxButton.tsx | 7 ++- .../components/Tool/ToolBrushButton.tsx | 7 ++- .../components/Tool/ToolColorPickerButton.tsx | 7 ++- .../components/Tool/ToolEraserButton.tsx | 7 ++- .../components/Tool/ToolFillColorPicker.tsx | 23 +++---- .../components/Tool/ToolGradientButton.tsx | 7 ++- .../Tool/ToolGradientClipToggle.tsx | 7 ++- .../Tool/ToolGradientModeToggle.tsx | 11 ++-- .../components/Tool/ToolMoveButton.tsx | 7 ++- .../components/Tool/ToolRectButton.tsx | 7 ++- .../components/Tool/ToolViewButton.tsx | 7 ++- .../CanvasToolbarFitBboxToLayersButton.tsx | 20 +++--- .../CanvasToolbarFitBboxToMasksButton.tsx | 20 +++--- .../Toolbar/CanvasToolbarRedoButton.tsx | 20 +++--- .../Toolbar/CanvasToolbarResetViewButton.tsx | 18 +++--- .../CanvasToolbarSaveToGalleryButton.tsx | 22 ++++--- .../Toolbar/CanvasToolbarUndoButton.tsx | 20 +++--- .../Transform/TransformSmoothingControls.tsx | 7 ++- .../common/CanvasEntityAddOfTypeButton.tsx | 22 ++++--- .../common/CanvasEntityDeleteButton.tsx | 24 +++---- .../common/CanvasEntityEnabledToggle.tsx | 22 ++++--- .../common/CanvasEntityHeaderWarnings.tsx | 24 +++---- ...EntityIsBookmarkedForQuickSwitchToggle.tsx | 20 +++--- .../common/CanvasEntityIsLockedToggle.tsx | 22 ++++--- .../common/CanvasEntityMergeVisibleButton.tsx | 22 ++++--- .../common/CanvasEntityPreviewImage.tsx | 7 ++- .../common/CanvasEntityTypeIsHiddenToggle.tsx | 20 +++--- .../CanvasNonRasterLayersIsHiddenToggle.tsx | 20 +++--- .../ShowDynamicPromptsPreviewButton.tsx | 7 ++- .../Boards/BoardsList/AddBoardButton.tsx | 26 ++++---- .../Boards/BoardsList/GalleryBoard.tsx | 7 ++- .../Boards/BoardsList/NoBoardBoard.tsx | 7 ++- .../Boards/BoardsSettingsPopover.tsx | 18 +++--- .../components/BoardsListPanelContent.tsx | 22 ++++--- .../gallery/components/GalleryPanel.tsx | 54 ++++++++-------- .../GallerySettingsPopover.tsx | 18 +++--- .../components/GalleryUploadButton.tsx | 20 +++--- .../ImageViewer/ProgressIndicator2.tsx | 7 ++- .../ModelInstallQueueItem.tsx | 7 ++- .../StarterModels/StarterModelsResults.tsx | 7 ++- .../ModelManagerPanel/ModelListItem.tsx | 7 ++- .../ModelManagerPanel/SyncModelsButton.tsx | 7 ++- .../InvocationNodeClassificationIcon.tsx | 7 ++- .../Invocation/InvocationNodeInfoIcon.tsx | 7 ++- .../InvocationNodeStatusIndicator.tsx | 7 ++- .../Invocation/fields/InputFieldHandle.tsx | 11 ++-- .../Invocation/fields/InputFieldTitle.tsx | 7 ++- .../Invocation/fields/OutputFieldHandle.tsx | 11 ++-- .../Invocation/fields/OutputFieldTitle.tsx | 7 ++- .../BottomLeftPanel/AutoLayoutPopover.tsx | 10 ++- .../BottomLeftPanel/ViewportControls.tsx | 55 ++++++++-------- .../flow/panels/TopPanel/AddNodeButton.tsx | 11 ++-- .../flow/panels/TopPanel/ClearFlowButton.tsx | 16 ++--- .../panels/TopPanel/SaveWorkflowButton.tsx | 18 +++--- .../ActiveWorkflowDescription.tsx | 7 ++- .../components/sidePanel/WorkflowName.tsx | 11 ++-- .../sidePanel/viewMode/WorkflowWarning.tsx | 7 ++- .../DeleteWorkflow.tsx | 7 ++- .../DownloadWorkflow.tsx | 7 ++- .../EditWorkflow.tsx | 7 ++- .../ViewWorkflow.tsx | 7 ++- .../WorkflowThumbnailField.tsx | 7 ++- .../Core/NegativePromptToggleButton.tsx | 7 ++- .../ParamPostProcessingModel.tsx | 7 ++- .../components/Prompts/ViewModePrompt.tsx | 7 ++- .../components/Upscale/ParamSpandrelModel.tsx | 7 ++- .../prompt/AddPromptTriggerButton.tsx | 7 ++- .../InvokeButtonTooltip.tsx | 7 +++ .../components/ActiveStylePreset.tsx | 15 ++--- .../StylePresetForm/StylePresetImageField.tsx | 7 ++- .../components/StylePresetImage.tsx | 7 ++- .../HotkeysModal/HotkeyListItem.tsx | 31 +++++----- .../components/InvokeAILogoComponent.tsx | 7 ++- .../system/components/StatusIndicator.tsx | 7 ++- .../components/FloatingLeftPanelButtons.tsx | 15 ++--- .../components/FloatingRightPanelButtons.tsx | 7 ++- .../src/features/ui/components/TabButton.tsx | 7 ++- 100 files changed, 809 insertions(+), 644 deletions(-) create mode 100644 invokeai/frontend/web/src/common/components/IAITooltip.tsx diff --git a/invokeai/frontend/web/src/common/components/IAITooltip.tsx b/invokeai/frontend/web/src/common/components/IAITooltip.tsx new file mode 100644 index 00000000000..578d30deffc --- /dev/null +++ b/invokeai/frontend/web/src/common/components/IAITooltip.tsx @@ -0,0 +1,22 @@ +import type { TooltipProps } from '@invoke-ai/ui-library'; +import { Tooltip } from '@invoke-ai/ui-library'; +import { useAppSelector } from 'app/store/storeHooks'; +import { selectSystemShouldEnableInformationalPopovers } from 'features/system/store/systemSlice'; +import type { PropsWithChildren } from 'react'; +import { memo } from 'react'; + +/** + * A Tooltip component that respects the user's "Enable Informational Popovers" setting. + * When the setting is disabled, this component returns its children without a tooltip wrapper. + */ +export const IAITooltip = memo(({ children, ...rest }: PropsWithChildren) => { + const shouldEnableInformationalPopovers = useAppSelector(selectSystemShouldEnableInformationalPopovers); + + if (!shouldEnableInformationalPopovers) { + return children; + } + + return {children}; +}); + +IAITooltip.displayName = 'IAITooltip'; diff --git a/invokeai/frontend/web/src/common/components/IconMenuItem.tsx b/invokeai/frontend/web/src/common/components/IconMenuItem.tsx index 6b58d5a6112..8b83448b038 100644 --- a/invokeai/frontend/web/src/common/components/IconMenuItem.tsx +++ b/invokeai/frontend/web/src/common/components/IconMenuItem.tsx @@ -1,5 +1,6 @@ import type { MenuItemProps } from '@invoke-ai/ui-library'; -import { Flex, MenuItem, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, MenuItem } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import type { ReactNode } from 'react'; type Props = MenuItemProps & { @@ -9,7 +10,7 @@ type Props = MenuItemProps & { export const IconMenuItem = ({ tooltip, icon, ...props }: Props) => { return ( - + { > {icon} - + ); }; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx index 4a7e6fa3750..07633d6d77f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx @@ -1,4 +1,5 @@ import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useAddControlLayer, useAddInpaintMask, @@ -26,17 +27,18 @@ export const EntityListGlobalActionBarAddLayerMenu = memo(() => { return ( - } - data-testid="control-layers-add-layer-menu-button" - isDisabled={isBusy} - /> + + } + data-testid="control-layers-add-layer-menu-button" + isDisabled={isBusy} + /> + } onClick={addInpaintMask} isDisabled={!isInpaintLayerEnabled}> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx index 2e2f5fa20a4..607cc16adc1 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { entityDuplicated } from 'features/controlLayers/store/canvasSlice'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; @@ -20,16 +21,17 @@ export const EntityListSelectedEntityActionBarDuplicateButton = memo(() => { }, [dispatch, selectedEntityIdentifier]); return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx index 62928f2094f..def4447ea1a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx @@ -6,9 +6,9 @@ import { PopoverContent, PopoverTrigger, Portal, - Tooltip, } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import RgbColorPicker from 'common/components/ColorPicker/RgbColorPicker'; import { rgbColorToString } from 'common/util/colorCodeTransformers'; import { MaskFillStyle } from 'features/controlLayers/components/common/MaskFillStyle'; @@ -56,8 +56,8 @@ export const EntityListSelectedEntityActionBarFill = memo(() => { return ( - - + + { bg={rgbColorToString(fill.color)} /> - - + + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx index bb4e809b4d1..2009777e2c6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types'; @@ -21,16 +22,17 @@ export const EntityListSelectedEntityActionBarFilterButton = memo(() => { } return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx index 2384f5dd416..e1be9980d5d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useInvertMask } from 'features/controlLayers/hooks/useInvertMask'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; @@ -23,16 +24,17 @@ export const EntityListSelectedEntityActionBarInvertMaskButton = memo(() => { } return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSaveToAssetsButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSaveToAssetsButton.tsx index bf222a5f5d0..7718020506b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSaveToAssetsButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSaveToAssetsButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useSaveLayerToAssets } from 'features/controlLayers/hooks/useSaveLayerToAssets'; @@ -28,16 +29,17 @@ export const EntityListSelectedEntityActionBarSaveToAssetsButton = memo(() => { } return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton.tsx index ca053c704d3..e6707c9ff51 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useEntitySegmentAnything } from 'features/controlLayers/hooks/useEntitySegmentAnything'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; import { isSegmentableEntityIdentifier } from 'features/controlLayers/store/types'; @@ -21,16 +22,17 @@ export const EntityListSelectedEntityActionBarSelectObjectButton = memo(() => { } return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx index 0b1009ea0e9..e54f23167be 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useEntityTransform } from 'features/controlLayers/hooks/useEntityTransform'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; import { isTransformableEntityIdentifier } from 'features/controlLayers/store/types'; @@ -21,16 +22,17 @@ export const EntityListSelectedEntityActionBarTransformButton = memo(() => { } return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch.tsx index 13a15363486..310007d9767 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch.tsx @@ -1,5 +1,6 @@ -import { FormControl, FormLabel, Switch, Tooltip } from '@invoke-ai/ui-library'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { selectIsolatedLayerPreview, settingsIsolatedLayerPreviewToggled, @@ -16,12 +17,12 @@ export const CanvasOperationIsolatedLayerPreviewSwitch = memo(() => { }, [dispatch]); return ( - + {t('controlLayers.settings.isolatedPreview')} - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx index 34f1607b954..05527face2a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx @@ -1,5 +1,6 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { selectBase } from 'features/controlLayers/store/paramsSlice'; import { memo, useCallback, useMemo } from 'react'; @@ -52,7 +53,7 @@ export const ControlLayerControlAdapterModel = memo(({ modelKey, onChange: onCha }); return ( - + - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerExportPSDButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerExportPSDButton.tsx index ffb4e813a98..04cb201ce57 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerExportPSDButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerExportPSDButton.tsx @@ -1,4 +1,5 @@ import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useExportCanvasToPSD } from 'features/controlLayers/hooks/useExportCanvasToPSD'; import { memo, useCallback } from 'react'; @@ -15,16 +16,17 @@ export const RasterLayerExportPSDButton = memo(() => { }, [exportCanvasToPSD]); return ( - } - /> + + } + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageHeader.tsx index 501ebe76fdb..c350cb7e9ee 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageHeader.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageHeader.tsx @@ -2,6 +2,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Flex, IconButton, Text } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useRefImageEntity } from 'features/controlLayers/components/RefImage/useRefImageEntity'; import { useRefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext'; import { selectMainModelConfig } from 'features/controlLayers/store/paramsSlice'; @@ -53,41 +54,44 @@ export const RefImageHeader = memo(() => { {warnings.length > 0 && ( - } - icon={} - colorScheme="warning" - /> + }> + } + colorScheme="warning" + /> + )} {!entity.isEnabled && ( Disabled )} - : } - /> - } - colorScheme="error" - /> + + : } + /> + + + } + colorScheme="error" + /> + ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageModel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageModel.tsx index 70f6e75b6d8..384b03e6a7d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageModel.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageModel.tsx @@ -1,5 +1,6 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { selectMainModelConfig } from 'features/controlLayers/store/paramsSlice'; import { areBasesCompatibleForRefImage } from 'features/controlLayers/store/validators'; @@ -73,7 +74,7 @@ export const RefImageModel = memo(({ modelKey, onChangeModel }: Props) => { }); return ( - + { noOptionsMessage={noOptionsMessage} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx index 0d9bd14955a..3b044e4de37 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx @@ -1,6 +1,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Flex, Icon, IconButton, Image, Skeleton, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, Icon, IconButton, Image, Skeleton, Text } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { round } from 'es-toolkit/compat'; import { useRefImageEntity } from 'features/controlLayers/components/RefImage/useRefImageEntity'; import { useRefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext'; @@ -125,7 +126,7 @@ export const RefImagePreview = memo(() => { ); } return ( - 0 ? : undefined}> + 0 ? : undefined}> { /> )} - + ); }); RefImagePreview.displayName = 'RefImagePreview'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalReferenceImageModel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalReferenceImageModel.tsx index c63a67ebdeb..a9081649c61 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalReferenceImageModel.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalReferenceImageModel.tsx @@ -1,5 +1,6 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { selectBase } from 'features/controlLayers/store/paramsSlice'; import { memo, useCallback, useMemo } from 'react'; @@ -54,7 +55,7 @@ export const RegionalReferenceImageModel = memo(({ modelKey, onChangeModel }: Pr }); return ( - + - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObjectInfoTooltip.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObjectInfoTooltip.tsx index 9ddd1b4c592..df593fa2fd6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObjectInfoTooltip.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObjectInfoTooltip.tsx @@ -1,4 +1,5 @@ -import { Flex, Icon, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library'; +import { Flex, Icon, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; import { Trans } from 'react-i18next'; @@ -48,11 +49,11 @@ SelectObjectHelpTooltipContent.displayName = 'SelectObjectHelpTooltipContent'; export const SelectObjectInfoTooltip = memo(() => { return ( - } minW={420}> + } minW={420}> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemCircularProgress.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemCircularProgress.tsx index 0a92106a6e6..3c3db0e9f70 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemCircularProgress.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemCircularProgress.tsx @@ -1,5 +1,6 @@ import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library'; -import { CircularProgress, Tooltip } from '@invoke-ai/ui-library'; +import { CircularProgress } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { getProgressMessage } from 'features/controlLayers/components/StagingArea/shared'; import { memo } from 'react'; import type { S } from 'services/api/types'; @@ -26,7 +27,7 @@ export const QueueItemCircularProgress = memo(({ itemId, status, ...rest }: Prop } return ( - + - + ); }); QueueItemCircularProgress.displayName = 'QueueItemCircularProgress'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx index f9fc483eea5..5a1cd7c9feb 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { @@ -28,30 +29,33 @@ export const StagingAreaAutoSwitchButtons = memo(() => { return ( <> - } - colorScheme={autoSwitch === 'off' ? 'invokeBlue' : 'base'} - onClick={onClickOff} - isDisabled={!shouldShowStagedImage} - /> - } - colorScheme={autoSwitch === 'switch_on_start' ? 'invokeBlue' : 'base'} - onClick={onClickSwitchOnStart} - isDisabled={!shouldShowStagedImage} - /> - } - colorScheme={autoSwitch === 'switch_on_finish' ? 'invokeBlue' : 'base'} - onClick={onClickSwitchOnFinished} - isDisabled={!shouldShowStagedImage} - /> + + } + colorScheme={autoSwitch === 'off' ? 'invokeBlue' : 'base'} + onClick={onClickOff} + isDisabled={!shouldShowStagedImage} + /> + + + } + colorScheme={autoSwitch === 'switch_on_start' ? 'invokeBlue' : 'base'} + onClick={onClickSwitchOnStart} + isDisabled={!shouldShowStagedImage} + /> + + + } + colorScheme={autoSwitch === 'switch_on_finish' ? 'invokeBlue' : 'base'} + onClick={onClickSwitchOnFinished} + isDisabled={!shouldShowStagedImage} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx index c18ca5cac19..37307052d72 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useIsRegionFocused } from 'common/hooks/focus'; import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; @@ -30,15 +31,16 @@ export const StagingAreaToolbarAcceptButton = memo(() => { ); return ( - } - onClick={ctx.acceptSelected} - colorScheme="invokeBlue" - isDisabled={!acceptSelectedIsEnabled || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled} - isLoading={cancelQueueItemsByDestination.isLoading} - /> + + } + onClick={ctx.acceptSelected} + colorScheme="invokeBlue" + isDisabled={!acceptSelectedIsEnabled || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled} + isLoading={cancelQueueItemsByDestination.isLoading} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx index 467c80d6ff7..7fcdb20c52f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination'; @@ -16,15 +17,16 @@ export const StagingAreaToolbarDiscardAllButton = memo(() => { const cancelQueueItemsByDestination = useCancelQueueItemsByDestination(); return ( - } - onClick={ctx.discardAll} - colorScheme="error" - isDisabled={cancelQueueItemsByDestination.isDisabled || !shouldShowStagedImage} - isLoading={cancelQueueItemsByDestination.isLoading} - /> + + } + onClick={ctx.discardAll} + colorScheme="error" + isDisabled={cancelQueueItemsByDestination.isDisabled || !shouldShowStagedImage} + isLoading={cancelQueueItemsByDestination.isLoading} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx index 8f912ca52e2..e5a4a33e3f5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; @@ -18,15 +19,16 @@ export const StagingAreaToolbarDiscardSelectedButton = memo(() => { const { t } = useTranslation(); return ( - } - onClick={ctx.discardSelected} - colorScheme="invokeBlue" - isDisabled={!discardSelectedIsEnabled || cancelQueueItem.isDisabled || !shouldShowStagedImage} - isLoading={cancelQueueItem.isLoading} - /> + + } + onClick={ctx.discardSelected} + colorScheme="invokeBlue" + isDisabled={!discardSelectedIsEnabled || cancelQueueItem.isDisabled || !shouldShowStagedImage} + isLoading={cancelQueueItem.isLoading} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx index 30f5eb0c387..30287a73adc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolBboxButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolBboxButton = memo(() => { variant="solid" onClick={selectBbox} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx index 1f3f2a00448..3d63d270a19 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolBrushButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolBrushButton = memo(() => { variant="solid" onClick={selectBrush} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx index a8c590163e5..0c009bc4128 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolColorPickerButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolColorPickerButton = memo(() => { variant="solid" onClick={selectColorPicker} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx index f9de6cc4aaa..d5c7f610f84 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolEraserButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolEraserButton = memo(() => { variant="solid" onClick={selectEraser} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx index 231296eec7b..62778a0a702 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx @@ -8,12 +8,12 @@ import { PopoverContent, PopoverTrigger, Portal, - Tooltip, useDisclosure, } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import RgbaColorPicker from 'common/components/ColorPicker/RgbaColorPicker'; +import { IAITooltip } from 'common/components/IAITooltip'; import { rgbaColorToString } from 'common/util/colorCodeTransformers'; import { selectCanvasSettingsSlice, @@ -102,7 +102,7 @@ export const ToolFillColorPicker = memo(() => { > - + { zIndex={fgColorzIndex} /> - + @@ -138,14 +138,15 @@ export const ToolFillColorPicker = memo(() => { - } - /> + + } + /> + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx index 32275399180..94cd761dc95 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { GradientToolIcon } from 'features/controlLayers/components/Tool/GradientIcons'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { memo, useCallback } from 'react'; @@ -14,7 +15,7 @@ export const ToolGradientButton = memo(() => { const gradientLabel = t('controlLayers.tool.gradient', { defaultValue: 'Gradient' }); return ( - + } @@ -23,7 +24,7 @@ export const ToolGradientButton = memo(() => { variant="solid" onClick={handleClick} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientClipToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientClipToggle.tsx index a89ef6a470b..6ef0845499f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientClipToggle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientClipToggle.tsx @@ -1,5 +1,6 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { selectGradientClipEnabled, settingsGradientClipToggled, @@ -20,7 +21,7 @@ export const ToolGradientClipToggle = memo(() => { const label = t('controlLayers.gradient.clip', { defaultValue: 'Clip Gradient' }); return ( - + } @@ -29,7 +30,7 @@ export const ToolGradientClipToggle = memo(() => { colorScheme={isEnabled ? 'invokeBlue' : 'base'} onClick={onClick} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientModeToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientModeToggle.tsx index 03b18c466ee..255a9b1d4da 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientModeToggle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientModeToggle.tsx @@ -1,5 +1,6 @@ -import { ButtonGroup, IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { ButtonGroup, IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { GradientLinearIcon, GradientRadialIcon } from 'features/controlLayers/components/Tool/GradientIcons'; import { selectGradientType, settingsGradientTypeChanged } from 'features/controlLayers/store/canvasSettingsSlice'; import { memo, useCallback } from 'react'; @@ -15,7 +16,7 @@ export const ToolGradientModeToggle = memo(() => { return ( - + } @@ -23,8 +24,8 @@ export const ToolGradientModeToggle = memo(() => { variant="solid" onClick={onLinearClick} /> - - + + } @@ -32,7 +33,7 @@ export const ToolGradientModeToggle = memo(() => { variant="solid" onClick={onRadialClick} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx index cd842e64b60..c908eef50c1 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolMoveButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolMoveButton = memo(() => { variant="solid" onClick={selectMove} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx index 93029390883..4bdb818ea49 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolRectButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolRectButton = memo(() => { variant="solid" onClick={selectRect} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx index f16c055fcf2..5aa9060ffb7 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo } from 'react'; @@ -19,7 +20,7 @@ export const ToolViewButton = memo(() => { }); return ( - + } @@ -27,7 +28,7 @@ export const ToolViewButton = memo(() => { variant="solid" onClick={selectView} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx index 017c550d84c..dcde2246b48 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx @@ -1,4 +1,5 @@ import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useIsRegionFocused } from 'common/hooks/focus'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; @@ -30,15 +31,16 @@ export const CanvasToolbarFitBboxToLayersButton = memo(() => { }); return ( - } - isDisabled={isBusy} - /> + + } + isDisabled={isBusy} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton.tsx index 80b818c7051..6652f2a0360 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton.tsx @@ -1,4 +1,5 @@ import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useAutoFitBBoxToMasks } from 'features/controlLayers/hooks/useAutoFitBBoxToMasks'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useVisibleEntityCountByType } from 'features/controlLayers/hooks/useVisibleEntityCountByType'; @@ -30,15 +31,16 @@ export const CanvasToolbarFitBboxToMasksButton = memo(() => { }); return ( - } - isDisabled={isBusy || !hasVisibleMasks} - /> + + } + isDisabled={isBusy || !hasVisibleMasks} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarRedoButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarRedoButton.tsx index 729eaca1ed9..878bef17dc2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarRedoButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarRedoButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { canvasRedo } from 'features/controlLayers/store/canvasSlice'; import { selectCanvasMayRedo } from 'features/controlLayers/store/selectors'; @@ -17,15 +18,16 @@ export const CanvasToolbarRedoButton = memo(() => { }, [dispatch]); return ( - } - variant="link" - alignSelf="stretch" - isDisabled={isBusy || !mayRedo} - /> + + } + variant="link" + alignSelf="stretch" + isDisabled={isBusy || !mayRedo} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx index cfa6454baf3..47e6bc700ef 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx @@ -1,4 +1,5 @@ import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useIsRegionFocused } from 'common/hooks/focus'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; @@ -59,14 +60,15 @@ export const CanvasToolbarResetViewButton = memo(() => { }); return ( - } - variant="link" - alignSelf="stretch" - /> + + } + variant="link" + alignSelf="stretch" + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx index 38ca25e41c9..419bd7acbf6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx @@ -1,4 +1,5 @@ import { IconButton, useShiftModifier } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useSaveBboxToGallery, useSaveCanvasToGallery } from 'features/controlLayers/hooks/saveCanvasHooks'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { memo } from 'react'; @@ -13,16 +14,17 @@ export const CanvasToolbarSaveToGalleryButton = memo(() => { const saveBboxToGallery = useSaveBboxToGallery(); return ( - } - aria-label={shift ? t('controlLayers.saveBboxToGallery') : t('controlLayers.saveCanvasToGallery')} - colorScheme="invokeBlue" - tooltip={shift ? t('controlLayers.saveBboxToGallery') : t('controlLayers.saveCanvasToGallery')} - isDisabled={isBusy} - /> + + } + aria-label={shift ? t('controlLayers.saveBboxToGallery') : t('controlLayers.saveCanvasToGallery')} + colorScheme="invokeBlue" + isDisabled={isBusy} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx index 7a884013f0e..65df5ad229e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx @@ -1,5 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { canvasUndo } from 'features/controlLayers/store/canvasSlice'; import { selectCanvasMayUndo } from 'features/controlLayers/store/selectors'; @@ -17,15 +18,16 @@ export const CanvasToolbarUndoButton = memo(() => { }, [dispatch]); return ( - } - variant="link" - alignSelf="stretch" - isDisabled={isBusy || !mayUndo} - /> + + } + variant="link" + alignSelf="stretch" + isDisabled={isBusy || !mayUndo} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformSmoothingControls.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformSmoothingControls.tsx index 65a9f538395..17dfe765fcc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformSmoothingControls.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformSmoothingControls.tsx @@ -1,5 +1,6 @@ -import { Flex, FormControl, FormLabel, Select, Switch, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, FormControl, FormLabel, Select, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { selectTransformSmoothingEnabled, selectTransformSmoothingMode, @@ -30,12 +31,12 @@ export const TransformSmoothingControls = memo(() => { return ( - + {t('controlLayers.transform.smoothing')} - + {t('controlLayers.transform.smoothingMode')} ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator2.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator2.tsx index b635c37d804..cf1896755a0 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator2.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator2.tsx @@ -1,5 +1,6 @@ import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library'; -import { CircularProgress, Tooltip } from '@invoke-ai/ui-library'; +import { CircularProgress } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { memo } from 'react'; import type { S } from 'services/api/types'; import { formatProgressMessage } from 'services/events/stores'; @@ -14,7 +15,7 @@ const circleStyles: SystemStyleObject = { export const ProgressIndicator = memo( ({ progressEvent, ...rest }: { progressEvent: S['InvocationProgressEvent'] } & CircularProgressProps) => { return ( - + - + ); } ); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx index bfe81713d09..999b181c9eb 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx @@ -1,4 +1,5 @@ -import { Flex, IconButton, Progress, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, IconButton, Progress, Text } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { isNil } from 'es-toolkit/compat'; import { toast } from 'features/toast/toast'; import { t } from 'i18next'; @@ -100,7 +101,7 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => { return ( - }> + }> {modelName} @@ -115,7 +116,7 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => { /> - + {t('modelManager.starterBundles')} - + - + {map(results.starter_bundles, (bundle) => ( diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx index 9547046ba41..d44a4ddb2f3 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -1,7 +1,8 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Badge, chakra, Checkbox, Flex, Spacer, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Badge, chakra, Checkbox, Flex, Spacer, Text } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { selectModelManagerV2Slice, selectSelectedModelKeys, @@ -143,12 +144,12 @@ const ModelListItem = ({ model }: ModelListItemProps) => { {isMissing && ( - + {t('modelManager.missingFiles')} - + )} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/SyncModelsButton.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/SyncModelsButton.tsx index 5734d84e9cd..5277721a3ce 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/SyncModelsButton.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/SyncModelsButton.tsx @@ -1,4 +1,5 @@ -import { Button, Tooltip, useDisclosure } from '@invoke-ai/ui-library'; +import { Button, useDisclosure } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiArrowsClockwiseBold } from 'react-icons/pi'; @@ -15,7 +16,7 @@ export const SyncModelsButton = memo(() => { return ( <> - + - + ); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx index 6c1a012e891..4cfe4658ca9 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx @@ -1,4 +1,5 @@ -import { Icon, Tooltip } from '@invoke-ai/ui-library'; +import { Icon } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useNodeClassification } from 'features/nodes/hooks/useNodeClassification'; import type { Classification } from 'features/nodes/types/common'; import { memo } from 'react'; @@ -17,13 +18,13 @@ const InvocationNodeClassificationIcon = (_: Props) => { } return ( - } placement="top" shouldWrapChildren > - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx index a257326f929..0e1623f39eb 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx @@ -1,4 +1,5 @@ -import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, Icon, Text } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { compare } from 'compare-versions'; import { useInvocationNodeNotes } from 'features/nodes/hooks/useNodeNotes'; import { useNodeTemplateOrThrow } from 'features/nodes/hooks/useNodeTemplateOrThrow'; @@ -14,9 +15,9 @@ interface Props { export const InvocationNodeInfoIcon = memo(({ nodeId }: Props) => { return ( - } placement="top" shouldWrapChildren> + } placement="top" shouldWrapChildren> - + ); }); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx index a740a2ee3df..bed3b84f626 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx @@ -1,5 +1,6 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Badge, CircularProgress, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Badge, CircularProgress, Flex, Icon, Image, Text } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState'; import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants'; import type { NodeExecutionState } from 'features/nodes/types/invocation'; @@ -29,11 +30,11 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => { } return ( - } placement="top"> + } placement="top"> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx index ba3282459fd..f94430aade3 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx @@ -1,6 +1,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Box, Tooltip } from '@invoke-ai/ui-library'; +import { Box } from '@invoke-ai/ui-library'; import { Handle, Position } from '@xyflow/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor'; import { useConnectionErrorTKey, @@ -106,7 +107,7 @@ type HandleCommonProps = { const IdleHandle = memo(({ fieldTemplate, fieldTypeName, fieldColor, isModelField }: HandleCommonProps) => { return ( - + - + ); }); IdleHandle.displayName = 'IdleHandle'; @@ -139,7 +140,7 @@ const ConnectionInProgressHandle = memo( }, [fieldTypeName, t, connectionError]); return ( - + - + ); } ); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx index 396b05c2ac2..98a7d6ec57a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx @@ -1,6 +1,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Icon, Input, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Icon, Input, Text } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useEditable } from 'common/hooks/useEditable'; import { InputFieldTooltipContent } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltipContent'; import { @@ -90,7 +91,7 @@ export const InputFieldTitle = memo((props: Props) => { if (!editable.isEditing) { return ( - } openDelay={HANDLE_TOOLTIP_OPEN_DELAY} placement="top" @@ -108,7 +109,7 @@ export const InputFieldTitle = memo((props: Props) => { {editable.value} {isAddedToForm && } - + ); } diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldHandle.tsx index cbe738f60a2..018552aba1a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldHandle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldHandle.tsx @@ -1,6 +1,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Box, Tooltip } from '@invoke-ai/ui-library'; +import { Box } from '@invoke-ai/ui-library'; import { Handle, Position } from '@xyflow/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor'; import { useConnectionErrorTKey, @@ -106,7 +107,7 @@ type HandleCommonProps = { const IdleHandle = memo(({ fieldTemplate, fieldTypeName, fieldColor, isModelField }: HandleCommonProps) => { return ( - + - + ); }); IdleHandle.displayName = 'IdleHandle'; @@ -139,7 +140,7 @@ const ConnectionInProgressHandle = memo( }, [fieldTypeName, t, connectionErrorTKey]); return ( - + - + ); } ); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx index ac4715f71e0..df935db91c2 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx @@ -1,5 +1,6 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Text, Tooltip } from '@invoke-ai/ui-library'; +import { Text } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { OutputFieldTooltipContent } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTooltipContent'; import { useConnectionErrorTKey, @@ -34,7 +35,7 @@ export const OutputFieldTitle = memo(({ nodeId, fieldName }: Props) => { const connectionErrorTKey = useConnectionErrorTKey(nodeId, fieldName, 'source'); return ( - } openDelay={HANDLE_TOOLTIP_OPEN_DELAY} placement="top" @@ -47,7 +48,7 @@ export const OutputFieldTitle = memo(({ nodeId, fieldName }: Props) => { > {fieldTemplate.title} - + ); }); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx index 10609fbc267..38706e9f6ba 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx @@ -18,6 +18,7 @@ import { } from '@invoke-ai/ui-library'; import { useReactFlow } from '@xyflow/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { buildUseBoolean } from 'common/hooks/useBoolean'; import { useAutoLayout } from 'features/nodes/hooks/useAutoLayout'; import { @@ -114,12 +115,9 @@ export const AutoLayoutPopover = memo(() => { return ( - } - onClick={popover.toggle} - /> + + } onClick={popover.toggle} /> + diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx index 68801954f50..9c36cb9a699 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx @@ -1,6 +1,7 @@ import { ButtonGroup, IconButton } from '@invoke-ai/ui-library'; import { useReactFlow } from '@xyflow/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { selectShouldShowMinimapPanel, shouldShowMinimapPanelChanged, @@ -40,32 +41,36 @@ const ViewportControls = () => { return ( - } - /> - } - /> - } - /> + + } + /> + + + } + /> + + + } + /> + - } - /> + + } + /> + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx index 719f84bf646..85c9ba38e87 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx @@ -1,4 +1,5 @@ import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { $addNodeCmdk } from 'features/nodes/store/nodesSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -12,13 +13,9 @@ const AddNodeButton = () => { }, []); return ( - } - onClick={onClick} - pointerEvents="auto" - /> + + } onClick={onClick} pointerEvents="auto" /> + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx index 86411f50265..d5a8cacceae 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx @@ -1,5 +1,6 @@ import { ConfirmationAlertDialog, Flex, IconButton, Text, useDisclosure } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useDoesWorkflowHaveUnsavedChanges } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher'; import { nodeEditorReset } from 'features/nodes/store/nodesSlice'; import { toast } from 'features/toast/toast'; @@ -35,13 +36,14 @@ const ClearFlowButton = () => { return ( <> - } - onClick={onClick} - pointerEvents="auto" - /> + + } + onClick={onClick} + pointerEvents="auto" + /> + { const saveOrSaveAsWorkflow = useSaveOrSaveAsWorkflow(); return ( - } - isDisabled={!doesWorkflowHaveUnsavedChanges} - onClick={saveOrSaveAsWorkflow} - pointerEvents="auto" - /> + + } + isDisabled={!doesWorkflowHaveUnsavedChanges} + onClick={saveOrSaveAsWorkflow} + pointerEvents="auto" + /> + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription.tsx index 091a2bf758d..256e53c1df8 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription.tsx @@ -1,5 +1,6 @@ -import { Text, Tooltip } from '@invoke-ai/ui-library'; +import { Text } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { linkifyOptions, linkifySx } from 'common/components/linkify'; import { selectWorkflowDescription } from 'features/nodes/store/selectors'; import Linkify from 'linkify-react'; @@ -13,11 +14,11 @@ export const ActiveWorkflowDescription = memo(() => { } return ( - + {description} - + ); }); diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowName.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowName.tsx index 024955f3c4b..c0cb776d313 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowName.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowName.tsx @@ -1,5 +1,6 @@ -import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, Icon, Text } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useDoesWorkflowHaveUnsavedChanges } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher'; import { selectWorkflowName } from 'features/nodes/store/selectors'; import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice'; @@ -18,11 +19,11 @@ export const WorkflowName = () => { return ( {name.length ? ( - } placement="top"> + } placement="top"> {name} - + ) : ( {t('workflows.unnamedWorkflow')} @@ -30,11 +31,11 @@ export const WorkflowName = () => { )} {doesWorkflowHaveUnsavedChanges && mode === 'edit' && ( - + - + )} diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowWarning.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowWarning.tsx index d5182ddd625..87f57e394c3 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowWarning.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowWarning.tsx @@ -1,4 +1,5 @@ -import { Flex, Icon, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, Icon } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate'; import { PiWarningBold } from 'react-icons/pi'; @@ -12,10 +13,10 @@ export const WorkflowWarning = () => { } return ( - }> + }> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DeleteWorkflow.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DeleteWorkflow.tsx index 025406a0f00..45324638dc4 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DeleteWorkflow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DeleteWorkflow.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useDeleteWorkflow } from 'features/workflowLibrary/components/DeleteLibraryWorkflowConfirmationAlertDialog'; import type { MouseEvent } from 'react'; import { useCallback } from 'react'; @@ -17,7 +18,7 @@ export const DeleteWorkflow = ({ workflowId }: { workflowId: string }) => { [deleteWorkflow, workflowId] ); return ( - + { colorScheme="error" icon={} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DownloadWorkflow.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DownloadWorkflow.tsx index 9e58790e8ca..f223ce40fbc 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DownloadWorkflow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DownloadWorkflow.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useDownloadWorkflowById } from 'features/workflowLibrary/hooks/useDownloadWorkflowById'; import type { MouseEvent } from 'react'; import { useCallback } from 'react'; @@ -18,7 +19,7 @@ export const DownloadWorkflow = ({ workflowId }: { workflowId: string }) => { const { t } = useTranslation(); return ( - + { icon={} isLoading={downloadWorkflowById.isLoading} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/EditWorkflow.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/EditWorkflow.tsx index 7298ba8a37c..b125c2c3706 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/EditWorkflow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/EditWorkflow.tsx @@ -1,5 +1,6 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice'; import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog'; import type { MouseEvent } from 'react'; @@ -27,7 +28,7 @@ export const EditWorkflow = ({ workflowId }: { workflowId: string }) => { ); return ( - + { onClick={handleClickEdit} icon={} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx index 34dbe4bde8a..fad26ea11ba 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx @@ -1,5 +1,6 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice'; import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog'; import type { MouseEvent } from 'react'; @@ -27,7 +28,7 @@ export const ViewWorkflow = ({ workflowId }: { workflowId: string }) => { ); return ( - + { onClick={handleClickLoad} icon={} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowThumbnail/WorkflowThumbnailField.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowThumbnail/WorkflowThumbnailField.tsx index 4e8811e40c9..58dff83b52b 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowThumbnail/WorkflowThumbnailField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowThumbnail/WorkflowThumbnailField.tsx @@ -1,4 +1,5 @@ -import { Box, Button, Flex, Icon, IconButton, Image, Tooltip } from '@invoke-ai/ui-library'; +import { Box, Button, Flex, Icon, IconButton, Image } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { dropzoneAccept } from 'common/hooks/useImageUploadButton'; import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob'; import { useCallback, useEffect, useState } from 'react'; @@ -88,7 +89,7 @@ export const WorkflowThumbnailField = ({ return ( <> - + - + ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx index 9dc09f802d0..af320dc0083 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx @@ -1,5 +1,6 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { negativePromptChanged, selectHasNegativePrompt } from 'features/controlLayers/store/paramsSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -25,7 +26,7 @@ export const NegativePromptToggleButton = memo(() => { ); return ( - + { px={0.5} colorScheme={hasNegativePrompt ? 'invokeBlue' : 'base'} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/ParamPostProcessingModel.tsx b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/ParamPostProcessingModel.tsx index e7e75336dcb..bd4d897109a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/ParamPostProcessingModel.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/ParamPostProcessingModel.tsx @@ -1,5 +1,6 @@ -import { Box, Combobox, Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; +import { Box, Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useModelCombobox } from 'common/hooks/useModelCombobox'; import { postProcessingModelChanged, selectPostProcessingModel } from 'features/parameters/store/upscaleSlice'; import { memo, useCallback, useMemo } from 'react'; @@ -39,7 +40,7 @@ const ParamPostProcessingModel = () => { {t('upscaling.postProcessingModel')} - + { isDisabled={options.length === 0} /> - + ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx index d2801dd34ce..b8218e82865 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx @@ -1,5 +1,6 @@ -import { Box, Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Box, Flex, Icon, Text } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { viewModeChanged } from 'features/stylePresets/store/stylePresetSlice'; import { getViewModeChunks } from 'features/stylePresets/util/getViewModeChunks'; import { useCallback, useMemo } from 'react'; @@ -59,7 +60,7 @@ export const ViewModePrompt = ({ - + - + ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx index 47a95f03c5d..afc7a5a4695 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx @@ -1,5 +1,6 @@ -import { Box, Combobox, Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; +import { Box, Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useModelCombobox } from 'common/hooks/useModelCombobox'; import { selectUpscaleModel, upscaleModelChanged } from 'features/parameters/store/upscaleSlice'; @@ -42,7 +43,7 @@ const ParamSpandrelModel = () => { {t('upscaling.upscaleModel')} - + { isDisabled={options.length === 0} /> - + ); diff --git a/invokeai/frontend/web/src/features/prompt/AddPromptTriggerButton.tsx b/invokeai/frontend/web/src/features/prompt/AddPromptTriggerButton.tsx index bda8f2eed25..5ede184f512 100644 --- a/invokeai/frontend/web/src/features/prompt/AddPromptTriggerButton.tsx +++ b/invokeai/frontend/web/src/features/prompt/AddPromptTriggerButton.tsx @@ -1,4 +1,5 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCodeBold } from 'react-icons/pi'; @@ -12,7 +13,7 @@ export const AddPromptTriggerButton = memo((props: Props) => { const { onOpen, isOpen } = props; const { t } = useTranslation(); return ( - + { icon={} onClick={onOpen} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip.tsx index 9f1d004ba87..c4c14a6a282 100644 --- a/invokeai/frontend/web/src/features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip.tsx +++ b/invokeai/frontend/web/src/features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip.tsx @@ -12,6 +12,7 @@ import type { BatchSizeResult } from 'features/nodes/util/node/resolveBatchValue import { getBatchSize } from 'features/nodes/util/node/resolveBatchValue'; import type { Reason } from 'features/queue/store/readiness'; import { $isReadyToEnqueue, $reasonsWhyCannotEnqueue, selectPromptsCount } from 'features/queue/store/readiness'; +import { selectSystemShouldEnableInformationalPopovers } from 'features/system/store/systemSlice'; import { selectActiveTab } from 'features/ui/store/uiSelectors'; import type { PropsWithChildren } from 'react'; import { memo, useEffect, useMemo, useState } from 'react'; @@ -24,6 +25,12 @@ type Props = TooltipProps & { }; export const InvokeButtonTooltip = ({ prepend, children, ...rest }: PropsWithChildren) => { + const shouldEnableInformationalPopovers = useAppSelector(selectSystemShouldEnableInformationalPopovers); + + if (!shouldEnableInformationalPopovers) { + return children; + } + return ( } maxW={512} {...rest}> {children} diff --git a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx index e3cf278edf0..f350e8dea04 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx @@ -1,5 +1,6 @@ -import { Badge, Flex, IconButton, Spacer, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Badge, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { negativePromptChanged, positivePromptChanged } from 'features/controlLayers/store/paramsSlice'; import { usePresetModifiedPrompts } from 'features/stylePresets/hooks/usePresetModifiedPrompts'; import { @@ -79,7 +80,7 @@ export const ActiveStylePreset = () => { {activeStylePreset.name} - + { colorScheme={viewMode ? 'invokeBlue' : 'base'} icon={} /> - - + + { aria-label={t('stylePresets.flatten')} icon={} /> - - + + { aria-label={t('stylePresets.clearTemplateSelection')} icon={} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetImageField.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetImageField.tsx index 089293d4e7a..bf5d3a7d246 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetImageField.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetImageField.tsx @@ -1,4 +1,5 @@ -import { Box, Button, Flex, Icon, IconButton, Image, Tooltip } from '@invoke-ai/ui-library'; +import { Box, Button, Flex, Icon, IconButton, Image } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { dropzoneAccept } from 'common/hooks/useImageUploadButton'; import { useCallback } from 'react'; import { useDropzone } from 'react-dropzone'; @@ -62,7 +63,7 @@ export const StylePresetImageField = (props: UseControllerProps - + - + ); diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx index a258b60efee..9aabd3666f9 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx @@ -1,4 +1,5 @@ -import { Flex, Icon, Image, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, Icon, Image } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { typedMemo } from 'common/util/typedMemo'; import { PiImage } from 'react-icons/pi'; @@ -7,7 +8,7 @@ const FALLBACK_ICON_SIZE = '24px'; const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: string | null; imageWidth?: number }) => { return ( - - + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx index 6f2aa8d97f8..8440a77c78c 100644 --- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx +++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx @@ -1,6 +1,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Button, Flex, IconButton, Kbd, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Button, Flex, IconButton, Kbd, Text } from '@invoke-ai/ui-library'; import type { AppThunkDispatch } from 'app/store/store'; +import { IAITooltip } from 'common/components/IAITooltip'; import type { Hotkey, HotkeyConflictInfo } from 'features/system/components/HotkeysModal/useHotkeyData'; import { IS_MAC_OS } from 'features/system/components/HotkeysModal/useHotkeyData'; import { hotkeyChanged, hotkeyReset } from 'features/system/store/hotkeysSlice'; @@ -263,7 +264,7 @@ const HotkeyItem = memo( const hasConflict = conflict !== null; return ( - )} - + ); } return ( - + - + ); }; @@ -332,7 +333,7 @@ const HotkeyItem = memo( {isEditing && ( <> {!isNewHotkey && ( - + } @@ -341,9 +342,9 @@ const HotkeyItem = memo( colorScheme="error" onClick={onDeleteEdit} /> - + )} - + } @@ -351,8 +352,8 @@ const HotkeyItem = memo( variant="ghost" onClick={onCancelEdit} /> - - + + } @@ -361,7 +362,7 @@ const HotkeyItem = memo( onClick={onSaveEdit} disabled={!canSaveEdit} /> - + )} @@ -449,7 +450,7 @@ const HotkeyItemsDisplay = memo( )} {isCustomized && ( - + } @@ -458,10 +459,10 @@ const HotkeyItemsDisplay = memo( colorScheme="warning" onClick={onReset} /> - + )} {!isAddingNew && ( - + } @@ -469,7 +470,7 @@ const HotkeyItemsDisplay = memo( size="sm" onClick={onAddHotkey} /> - + )} diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx index 0716a73c8c4..6167038cb94 100644 --- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx +++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx @@ -1,4 +1,5 @@ -import { Image, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Image, Text } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg'; import { memo, useMemo, useRef } from 'react'; import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo'; @@ -14,7 +15,7 @@ const InvokeAILogoComponent = () => { }, [appVersion]); return ( - + { minH="24px" userSelect="none" /> - + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx index a02b9199b19..62aeae3877e 100644 --- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx @@ -1,5 +1,6 @@ -import { Icon, Tooltip } from '@invoke-ai/ui-library'; +import { Icon } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { IAITooltip } from 'common/components/IAITooltip'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiWarningBold } from 'react-icons/pi'; @@ -11,9 +12,9 @@ const StatusIndicator = () => { if (!isConnected) { return ( - + - + ); } diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx index 81e8930e401..85a98ed0f55 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx @@ -1,4 +1,5 @@ -import { ButtonGroup, Flex, Icon, IconButton, spinAnimation, Tooltip, useShiftModifier } from '@invoke-ai/ui-library'; +import { ButtonGroup, Flex, Icon, IconButton, spinAnimation, useShiftModifier } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'; import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useDeleteAllExceptCurrentQueueItemDialog } from 'features/queue/components/DeleteAllExceptCurrentQueueItemConfirmationAlertDialog'; @@ -55,14 +56,14 @@ const ToggleLeftPanelButton = memo(() => { const { t } = useTranslation(); return ( - + } flexGrow={1} /> - + ); }); ToggleLeftPanelButton.displayName = 'ToggleLeftPanelButton'; @@ -117,7 +118,7 @@ const DeleteCurrentIconButton = memo(() => { const deleteCurrentQueueItem = useDeleteCurrentQueueItem(); return ( - + { colorScheme="error" flexGrow={1} /> - + ); }); @@ -138,7 +139,7 @@ const DeleteAllExceptCurrentIconButton = memo(() => { const deleteAllExceptCurrent = useDeleteAllExceptCurrentQueueItemDialog(); return ( - + { onClick={deleteAllExceptCurrent.openDialog} flexGrow={1} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingRightPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingRightPanelButtons.tsx index dc0d8025fad..50099bad480 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingRightPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingRightPanelButtons.tsx @@ -1,4 +1,5 @@ -import { Flex, IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, IconButton } from '@invoke-ai/ui-library'; +import { IAITooltip } from 'common/components/IAITooltip'; import { navigationApi } from 'features/ui/layouts/navigation-api'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -17,14 +18,14 @@ const ToggleRightPanelButton = memo(() => { const { t } = useTranslation(); return ( - + } h={48} /> - + ); }); ToggleRightPanelButton.displayName = 'ToggleRightPanelButton'; diff --git a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx index adc0d4ecfc2..e95e8c3dd8e 100644 --- a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx @@ -1,6 +1,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter'; import { navigationApi } from 'features/ui/layouts/navigation-api'; import { selectActiveTab } from 'features/ui/store/uiSelectors'; @@ -23,7 +24,7 @@ export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: React useCallbackOnDragEnter(selectTab, ref, 300); return ( - + - + ); }); From 1aab9f43dba2b2cb9453c80187423cf2a84ab3f6 Mon Sep 17 00:00:00 2001 From: Lincoln Stein Date: Mon, 16 Feb 2026 23:19:37 -0500 Subject: [PATCH 2/3] (chore): eslint, prettier, knip --- .../EntityListSelectedEntityActionBarFill.tsx | 12 ++---------- .../StagingArea/StagingAreaAutoSwitchButtons.tsx | 2 +- .../components/common/CanvasEntityHeaderWarnings.tsx | 2 +- .../common/CanvasEntityTypeIsHiddenToggle.tsx | 2 +- .../components/Boards/BoardsList/AddBoardButton.tsx | 2 +- .../gallery/components/BoardsListPanelContent.tsx | 4 +++- 6 files changed, 9 insertions(+), 15 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx index def4447ea1a..414668ed9b3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx @@ -1,15 +1,7 @@ -import { - Box, - Flex, - Popover, - PopoverBody, - PopoverContent, - PopoverTrigger, - Portal, -} from '@invoke-ai/ui-library'; +import { Box, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { IAITooltip } from 'common/components/IAITooltip'; import RgbColorPicker from 'common/components/ColorPicker/RgbColorPicker'; +import { IAITooltip } from 'common/components/IAITooltip'; import { rgbColorToString } from 'common/util/colorCodeTransformers'; import { MaskFillStyle } from 'features/controlLayers/components/common/MaskFillStyle'; import { entityFillColorChanged, entityFillStyleChanged } from 'features/controlLayers/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx index 5a1cd7c9feb..f976be4c0fb 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx @@ -1,7 +1,7 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; -import { IAITooltip } from 'common/components/IAITooltip'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { selectStagingAreaAutoSwitch, diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx index 90ce63b1098..0a25f37224c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx @@ -2,8 +2,8 @@ import { Flex, IconButton, ListItem, Text, UnorderedList } from '@invoke-ai/ui-l import { createSelector } from '@reduxjs/toolkit'; import { EMPTY_ARRAY } from 'app/store/constants'; import { useAppSelector } from 'app/store/storeHooks'; -import { upperFirst } from 'es-toolkit/compat'; import { IAITooltip } from 'common/components/IAITooltip'; +import { upperFirst } from 'es-toolkit/compat'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { useEntityIsEnabled } from 'features/controlLayers/hooks/useEntityIsEnabled'; import { selectMainModelConfig } from 'features/controlLayers/store/paramsSlice'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx index aa608b27a6c..a358bef5406 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx @@ -1,6 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; -import { IAITooltip } from 'common/components/IAITooltip'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { useEntityTypeIsHidden } from 'features/controlLayers/hooks/useEntityTypeIsHidden'; import { useEntityTypeString } from 'features/controlLayers/hooks/useEntityTypeString'; import { allEntitiesOfTypeIsHiddenToggled } from 'features/controlLayers/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx index 306c83f4a74..f143a04f340 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx @@ -1,6 +1,6 @@ import { IconButton } from '@invoke-ai/ui-library'; -import { IAITooltip } from 'common/components/IAITooltip'; import { useAppDispatch } from 'app/store/storeHooks'; +import { IAITooltip } from 'common/components/IAITooltip'; import { boardIdSelected, boardSearchTextChanged } from 'features/gallery/store/gallerySlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx b/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx index 39815299a44..cc539464a6e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx @@ -64,7 +64,9 @@ export const BoardsPanel = memo(() => { - + Date: Mon, 16 Feb 2026 23:25:46 -0500 Subject: [PATCH 3/3] chore(frontend): Remove unused imports --- .../controlLayers/components/RefImage/RefImagePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx index e3611d4be95..976a8c981b0 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx @@ -1,5 +1,5 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { Flex, Icon, IconButton, Image, Skeleton, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Flex, Icon, IconButton, Skeleton, Text } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { IAITooltip } from 'common/components/IAITooltip'; import { round } from 'es-toolkit/compat';