feat(client): added tooltip to block settings

packages/client/src/components/block-defaults/input-block/config.tsx

@@ -101,6 +101,7 @@ export const config: BlockConfig<InputBlockDef> = {
                             label="Rows"
                             path="rows"
                             type="number"
+                            description="This will determine how many rows are displayed on text input"
                         />
                     ),
                 },

packages/client/src/components/block-defaults/select-block/config.tsx

@@ -52,6 +52,7 @@ export const config: BlockConfig<SelectBlockDef> = {
                             id={id}
                             label="Enable Multi Select"
                             path="multiple"
+                            description="This setting will enable the multi-select feature on the select input"
                         />
                     ),
                 },

packages/client/src/components/block-defaults/text-block/config.tsx

@@ -46,6 +46,7 @@ export const config: BlockConfig<TextBlockDef> = {
                             id={id}
                             label="Enable Typewriting Effect"
                             path="isStreaming"
+                            description="This setting will enable the typewriting effect on the text"
                         />
                     ),
                 },

packages/client/src/components/block-settings/BaseSettingSection.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { styled, Stack, Typography } from '@semoss/ui';
+import { styled, Stack, Typography, Tooltip } from '@semoss/ui';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 const StyledTypography = styled(Typography)(() => ({
     width: '30%',
@@ -13,6 +14,7 @@ export const BaseSettingSection = (props: {
     label: string;
     children: ReactNode;
     wide?: boolean;
+    description?: string;
 }) => {
     return (
         <Stack
@@ -22,6 +24,17 @@ export const BaseSettingSection = (props: {
             spacing={2}
         >
             <StyledTypography variant="body2">{props.label}</StyledTypography>
+            {!!props.description?.length && (
+                <Tooltip placement="top" title={props.description} arrow>
+                    <HelpOutlineIcon
+                        color="action"
+                        sx={{
+                            fontSize: 15,
+                            marginLeft: '5px',
+                        }}
+                    />
+                </Tooltip>
+            )}
             <Stack
                 direction="row"
                 justifyContent="end"

packages/client/src/components/block-settings/shared/InputSettings.tsx

@@ -36,6 +36,11 @@ interface InputSettingsProps<D extends BlockDef = BlockDef> {
      * Parse input as object to set value
      */
     valueAsObject?: boolean;
+
+    /**
+     * What to be displayed on the tooltip to explain setting
+     */
+    description?: string;
 }
 
 export const InputSettings = observer(
@@ -46,6 +51,7 @@ export const InputSettings = observer(
         secondaryPath = undefined,
         type = 'text',
         valueAsObject = false,
+        description,
     }: InputSettingsProps<D>) => {
         const { data, setData } = useBlockSettings<D>(id);
 
@@ -124,7 +130,7 @@ export const InputSettings = observer(
         };
 
         return (
-            <BaseSettingSection label={label}>
+            <BaseSettingSection label={label} description={description}>
                 <TextField
                     fullWidth
                     value={value}

packages/client/src/components/block-settings/shared/SwitchSettings.tsx

@@ -25,12 +25,18 @@ interface SwitchSettingsProps<D extends BlockDef = BlockDef> {
     path: Paths<Block<D>['data'], 4>;
 
     resetValueOnChange?: boolean;
+
+    /**
+     * Desciption that will show on tooltip, to inform user about the setting
+     */
+    description?: string;
 }
 
 export const SwitchSettings = observer(
     <D extends BlockDef = BlockDef>({
         id,
         label = '',
+        description = '',
         path,
         resetValueOnChange = false,
     }: SwitchSettingsProps<D>) => {
@@ -97,7 +103,7 @@ export const SwitchSettings = observer(
         };
 
         return (
-            <BaseSettingSection label={label}>
+            <BaseSettingSection label={label} description={description}>
                 <Switch
                     checked={value}
                     onChange={(e) => {