From 959a8869c969cd2e42e5a3a19b70867573283f5a Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Thu, 22 May 2025 15:17:53 +0500
Subject: [PATCH 1/4] Adds tooltips for button components

---
 .../src/comps/comps/buttonComp/buttonComp.tsx | 40 +++++-----
 .../comps/buttonComp/toggleButtonComp.tsx     | 31 ++++----
 .../comps/comps/meetingComp/controlButton.tsx | 79 ++++++++++---------
 .../comps/comps/selectInputComp/radioComp.tsx |  7 +-
 4 files changed, 84 insertions(+), 73 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 8b03c0492..5760a3169 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -23,7 +23,7 @@ import {
   ButtonStyleControl,
 } from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
-
+import { Tooltip } from "antd";
 import React, { useContext, useEffect } from "react";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
@@ -139,24 +139,26 @@ const ButtonTmpComp = (function () {
       <ButtonCompWrapper $disabled={props.disabled}>
         <EditorContext.Consumer>
           {(editorState) => (
-            <Button100
-              ref={props.viewRef}
-              $buttonStyle={props.style}
-              loading={props.loading}
-              disabled={
-                props.disabled ||
-                (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
-              }
-              onClick={() =>
-                isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
-              }
-            >
-              {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
-              {
-                props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
-              }
-              {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
-            </Button100>
+            <Tooltip title={props.text}>
+              <Button100
+                ref={props.viewRef}
+                $buttonStyle={props.style}
+                loading={props.loading}
+                disabled={
+                  props.disabled ||
+                  (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
+                }
+                onClick={() =>
+                  isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
+                }
+              >
+                {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
+                {
+                  props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
+                }
+                {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
+              </Button100>
+            </Tooltip>
           )}
         </EditorContext.Consumer>
       </ButtonCompWrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index f78fee7bb..af9828e2a 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -26,6 +26,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState"; 
+import { Tooltip } from "antd";
 
 const IconWrapper = styled.div`
   display: flex;
@@ -78,20 +79,22 @@ const ToggleTmpComp = (function () {
         $showBorder={props.showBorder}
         $animationStyle={props.animationStyle}
       >
-        <Button100
-          ref={props.viewRef}
-          $buttonStyle={props.style}
-          loading={props.loading}
-          disabled={props.disabled}
-          onClick={() => {
-            props.onEvent("change");
-            props.value.onChange(!props.value.value);
-          }}
-        >
-          {props.iconPosition === "right" && text}
-          {<IconWrapper>{props.value.value ? props.trueIcon : props.falseIcon}</IconWrapper>}
-          {props.iconPosition === "left" && text}
-        </Button100>
+        <Tooltip title={props.value.value ? props.trueText : props.falseText}>
+          <Button100
+            ref={props.viewRef}
+            $buttonStyle={props.style}
+            loading={props.loading}
+            disabled={props.disabled}
+            onClick={() => {
+              props.onEvent("change");
+              props.value.onChange(!props.value.value);
+            }}
+          >
+            {props.iconPosition === "right" && text}
+            {<IconWrapper>{props.value.value ? props.trueIcon : props.falseIcon}</IconWrapper>}
+            {props.iconPosition === "left" && text}
+          </Button100>
+        </Tooltip>
       </ButtonCompWrapperStyled>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 28e318618..e0cf843b6 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
 import { useContext } from "react";
+import { Tooltip } from "antd";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;
@@ -242,48 +243,48 @@ let ButtonTmpComp = (function () {
                       : undefined
                   }
                 >
-                  <Button100
-                    ref={props.viewRef}
-                    $buttonStyle={props.style}
-                    loading={props.loading}
-                    style={
-                      props.autoHeight
-                        ? { 
-                          width: "100%", 
-                          height: "100%",
-                          aspectRatio: props.aspectRatio,
-                          borderRadius: props.style.radius,
-                        }
-                        : {
-                          aspectRatio: props.aspectRatio,
-                          borderRadius: props.style.radius,
-                        }
-                    }
-                    disabled={
-                      props.disabled ||
-                      (!isDefault(props.type) &&
-                        getForm(editorState, props.form)?.disableSubmit())
-                    }
-                    onClick={() =>
-                      isDefault(props.type)
-                        ? props.onEvent("click")
-                        : submitForm(editorState, props.form)
-                    }
-                  >
-                    {props.prefixIcon && (
-                      <IconWrapper
-                        $style={{ ...props.style, size: props.iconSize }}
-                      >
-                        {props.prefixIcon}
-                      </IconWrapper>
-                    )}
-                    
-                  </Button100>
+                  <Tooltip title={trans("meeting.meetingControlCompName")}>
+                    <Button100
+                      ref={props.viewRef}
+                      $buttonStyle={props.style}
+                      loading={props.loading}
+                      style={
+                        props.autoHeight
+                          ? {
+                              width: "100%",
+                              height: "100%",
+                              aspectRatio: props.aspectRatio,
+                              borderRadius: props.style.radius,
+                            }
+                          : {
+                              aspectRatio: props.aspectRatio,
+                              borderRadius: props.style.radius,
+                            }
+                      }
+                      disabled={
+                        props.disabled ||
+                        (!isDefault(props.type) &&
+                          getForm(editorState, props.form)?.disableSubmit())
+                      }
+                      onClick={() =>
+                        isDefault(props.type)
+                          ? props.onEvent("click")
+                          : submitForm(editorState, props.form)
+                      }
+                    >
+                      {props.prefixIcon && (
+                        <IconWrapper
+                          $style={{ ...props.style, size: props.iconSize }}
+                        >
+                          {props.prefixIcon}
+                        </IconWrapper>
+                      )}
+                    </Button100>
+                  </Tooltip>
                 </div>
               </Container>
             )}
-          >
-          </ReactResizeDetector>
+          ></ReactResizeDetector>
         )}
       </EditorContext.Consumer>
     );
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 6bc4805cd..671105eff 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import Tooltip from "antd/es/tooltip";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
@@ -122,7 +123,11 @@ let RadioBasicComp = (function () {
           options={props.options
             .filter((option) => option.value !== undefined && !option.hidden)
             .map((option) => ({
-              label: option.label,
+              label: (
+                <Tooltip title={option.label}>
+                  <span>{option.label}</span>
+                </Tooltip>
+              ),
               value: option.value,
               disabled: option.disabled,
             }))}

From f50ce811d64a7faa93c6b16f43fdcf5f097713cb Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Thu, 22 May 2025 16:18:59 +0500
Subject: [PATCH 2/4] - Added tooltip to control BUtton

---
 .../comps/comps/meetingComp/controlButton.tsx | 88 ++++++++++---------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 388861694..f13dfbe69 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -257,49 +257,51 @@ let ButtonTmpComp = (function () {
                       : undefined
                   }
                 >
-                  <Button100
-                    ref={props.viewRef}
-                    $buttonStyle={props.style}
-                    loading={props.loading}
-                    style={
-                      props.autoHeight
-                        ? { 
-                          width: "100%", 
-                          height: "100%",
-                          aspectRatio: props.aspectRatio,
-                          borderRadius: props.style.radius,
-                        }
-                        : {
-                          aspectRatio: props.aspectRatio,
-                          borderRadius: props.style.radius,
-                        }
-                    }
-                    disabled={
-                      props.disabled ||
-                      (!isDefault(props.type) &&
-                        getForm(editorState, props.form)?.disableSubmit())
-                    }
-                    onClick={() =>
-                      isDefault(props.type)
-                        ? props.onEvent("click")
-                        : submitForm(editorState, props.form)
-                    }
-                  >
-                    {props.sourceMode === 'standard' && props.prefixIcon && (
-                      <IconWrapper
-                        $style={{ ...props.style, size: props.iconSize }}
-                      >
-                        {props.prefixIcon}
-                      </IconWrapper>
-                    )}
-                    {props.sourceMode === 'asset-library' && props.iconScoutAsset && (
-                      <IconScoutWrapper
-                        $style={{ ...props.style, size: props.iconSize }}
-                      >
-                        <img src={props.iconScoutAsset.value} />
-                      </IconScoutWrapper>
-                    )}
-                  </Button100>
+                  <Tooltip title={trans("meeting.meetingControlCompName")}>
+                    <Button100
+                      ref={props.viewRef}
+                      $buttonStyle={props.style}
+                      loading={props.loading}
+                      style={
+                        props.autoHeight
+                          ? { 
+                            width: "100%", 
+                            height: "100%",
+                            aspectRatio: props.aspectRatio,
+                            borderRadius: props.style.radius,
+                          }
+                          : {
+                            aspectRatio: props.aspectRatio,
+                            borderRadius: props.style.radius,
+                          }
+                      }
+                      disabled={
+                        props.disabled ||
+                        (!isDefault(props.type) &&
+                          getForm(editorState, props.form)?.disableSubmit())
+                      }
+                      onClick={() =>
+                        isDefault(props.type)
+                          ? props.onEvent("click")
+                          : submitForm(editorState, props.form)
+                      }
+                    >
+                      {props.sourceMode === 'standard' && props.prefixIcon && (
+                        <IconWrapper
+                          $style={{ ...props.style, size: props.iconSize }}
+                        >
+                          {props.prefixIcon}
+                        </IconWrapper>
+                      )}
+                      {props.sourceMode === 'asset-library' && props.iconScoutAsset && (
+                        <IconScoutWrapper
+                          $style={{ ...props.style, size: props.iconSize }}
+                        >
+                          <img src={props.iconScoutAsset.value} />
+                        </IconScoutWrapper>
+                      )}
+                    </Button100>
+                  </Tooltip>
                 </div>
               </Container>
             )}

From 4ab8986261552c9be9257a6564e523ae61c5fb40 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Thu, 22 May 2025 16:51:58 +0500
Subject: [PATCH 3/4] Added tooltips for checkboxes

---
 .../src/comps/comps/selectInputComp/checkboxComp.tsx       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index d6eb38737..e01699cf9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -24,6 +24,7 @@ import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import Tooltip from "antd/es/tooltip";
 
 export const getStyle = (style: CheckboxStyleType) => {
   return css`
@@ -182,7 +183,11 @@ let CheckboxBasicComp = (function () {
           options={props.options
             .filter((option) => option.value !== undefined && !option.hidden)
             .map((option) => ({
-              label: option.label,
+              label: (
+                <Tooltip title={option.label}>
+                  <span>{option.label}</span>
+                </Tooltip>
+              ),
               value: option.value,
               disabled: option.disabled,
             }))}

From 8974731399a3092779abc90cd111df509d0679f4 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Fri, 23 May 2025 00:07:06 +0500
Subject: [PATCH 4/4] Fix merge conflicts

---
 .../comps/selectInputComp/checkboxComp.tsx     | 18 +++++++-----------
 .../comps/comps/selectInputComp/radioComp.tsx  | 14 ++++++--------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index d2d9ade51..a14983cfa 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -156,7 +156,7 @@ const MemoizedCheckboxGroup = memo(({
   disabled: boolean;
   style: CheckboxStyleType;
   layout: ValueFromOption<typeof RadioLayoutOptions>;
-  options: Array<{ label: string; value: string; disabled?: boolean }>;
+  options: Array<{ label: any; value: string; disabled?: boolean }>;
   onChange: (values: string[]) => void;
   viewRef: React.Ref<HTMLDivElement>;
   tabIndex?: number
@@ -231,7 +231,11 @@ let CheckboxBasicComp = (function () {
       return props.options
         .filter((option) => option.value !== undefined && !option.hidden)
         .map((option) => ({
-          label: option.label,
+          label: (
+            <Tooltip title={option.label}>
+              <span>{option.label}</span>
+            </Tooltip>
+          ),
           value: option.value,
           disabled: option.disabled,
         }));
@@ -249,15 +253,7 @@ let CheckboxBasicComp = (function () {
           disabled={props.disabled}
           style={props.inputFieldStyle}
           layout={props.layout}
-          options={filteredOptions()
-            .map((option) => ({
-              label: (
-                <Tooltip title={option.label}>
-                  <span>{option.label}</span>
-                </Tooltip>
-              )
-            })
-          )}
+          options={filteredOptions()}
           onChange={handleValidateChange}
           viewRef={props.viewRef}
           tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 27a53f0cd..8bfe2a7b9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -134,7 +134,11 @@ const MemoizedRadio = memo(({
     return options
       .filter((option) => option.value !== undefined && !option.hidden)
       .map((option) => ({
-        label: option.label,
+        label: (
+          <Tooltip title={option.label}>
+              <span>{option.label}</span>
+          </Tooltip>
+        ),
         value: option.value,
         disabled: option.disabled,
       }));
@@ -196,13 +200,7 @@ let RadioBasicComp = (function () {
           style={props.style}
           inputFieldStyle={props.inputFieldStyle}
           layout={props.layout}
-          options={props.options.map((option) => ({
-              label: (
-                <Tooltip title={option.label}>
-                  <span>{option.label}</span>
-                </Tooltip>
-              )}
-            ))}
+          options={props.options}
           onChange={handleValidateChange}
           viewRef={(el) => {
             if (!mountedRef.current) return;