Merge pull request #1699 from kamalqureshi/tooltip_for_buttons

Adds tooltips for button components

Author: FalkWolsky

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, useCallback } from "react";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
@@ -187,22 +187,24 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
     <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={handleClick}
-          >
-            {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={handleClick}
+            >
+              {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>

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>
     );
   })

client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 
 import { useContext } from "react";
+import { Tooltip } from "antd";
 import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 
 const Container = styled.div<{ $style: any }>`
@@ -258,49 +259,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 }}
-                  >
-                    {Boolean(props.iconScoutAsset.value) && <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 }}
+                    >
+                      {Boolean(props.iconScoutAsset.value) && <img src={props.iconScoutAsset.value} />}
+                    </IconScoutWrapper>
+                  )}
+                </Button100>
+              </Tooltip>
             </div>
           </Container>
         )}

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";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 export const getStyle = (style: CheckboxStyleType) => {
@@ -155,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
@@ -230,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,
         }));

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";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
@@ -133,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,
       }));