feat(ui): add tooltip to IAIMantineSelect

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

@@ -1,16 +1,20 @@
-import { forwardRef } from '@chakra-ui/react';
+import { Tooltip, forwardRef } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { memo } from 'react';
 
-type IAISelectProps = SelectProps;
+type IAISelectProps = SelectProps & {
+  tooltip?: string;
+};
 
 const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
-  const { searchable = true, ...rest } = props;
+  const { searchable = true, tooltip, ...rest } = props;
   return (
+    <Tooltip label={tooltip} placement="top" hasArrow>
       <Select
         ref={ref}
         searchable={searchable}
         styles={() => ({
+          root: {},
           label: {
             color: 'var(--invokeai-colors-base-300)',
             fontWeight: 'normal',
@@ -57,6 +61,7 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
         })}
         {...rest}
       />
+    </Tooltip>
   );
 });
 

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

@@ -54,6 +54,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
       value={model}
       onChange={handleModelChanged}
       disabled={!isReady}
+      tooltip={model}
     />
   );
   // return (

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

@@ -63,6 +63,7 @@ const ModelSelect = () => {
 
   return (
     <IAIMantineSelect
+      tooltip={selectedModel?.description}
       label={t('modelManager.model')}
       value={selectedModel?.name ?? ''}
       placeholder="Pick one"