From 2270c270ef99461266316b1dd47e4d70d8528add Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 3 Jun 2023 22:47:51 +1000
Subject: [PATCH] feat(ui): add tooltip to IAISwitch

---
 .../web/src/common/components/IAISwitch.tsx   | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAISwitch.tsx b/invokeai/frontend/web/src/common/components/IAISwitch.tsx
index 9a7ba7eb76..33c46c4aeb 100644
--- a/invokeai/frontend/web/src/common/components/IAISwitch.tsx
+++ b/invokeai/frontend/web/src/common/components/IAISwitch.tsx
@@ -5,6 +5,7 @@ import {
   FormLabelProps,
   Switch,
   SwitchProps,
+  Tooltip,
 } from '@chakra-ui/react';
 import { memo } from 'react';
 
@@ -13,6 +14,7 @@ interface Props extends SwitchProps {
   width?: string | number;
   formControlProps?: FormControlProps;
   formLabelProps?: FormLabelProps;
+  tooltip?: string;
 }
 
 /**
@@ -25,24 +27,27 @@ const IAISwitch = (props: Props) => {
     width = 'auto',
     formControlProps,
     formLabelProps,
+    tooltip,
     ...rest
   } = props;
   return (
-    <FormControl
-      isDisabled={isDisabled}
-      width={width}
-      display="flex"
-      gap={4}
-      alignItems="center"
-      {...formControlProps}
-    >
-      {label && (
-        <FormLabel my={1} flexGrow={1} {...formLabelProps}>
-          {label}
-        </FormLabel>
-      )}
-      <Switch {...rest} />
-    </FormControl>
+    <Tooltip label={tooltip} hasArrow placement="top" isDisabled={!tooltip}>
+      <FormControl
+        isDisabled={isDisabled}
+        width={width}
+        display="flex"
+        gap={4}
+        alignItems="center"
+        {...formControlProps}
+      >
+        {label && (
+          <FormLabel my={1} flexGrow={1} {...formLabelProps}>
+            {label}
+          </FormLabel>
+        )}
+        <Switch {...rest} />
+      </FormControl>
+    </Tooltip>
   );
 };