Merge pull request #1707 from kamalqureshi/tooltip_for_buttons

Tooltips - Properties view

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -134,6 +134,7 @@ const childrenMap = {
   style: ButtonStyleControl,
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLElement>,
+  tooltip: StringControl
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
@@ -146,6 +147,7 @@ const ButtonPropertyView = React.memo((props: {
     <>
       <Section name={sectionNames.basic}>
         {props.children.text.propertyView({ label: trans("text") })}
+        {props.children.tooltip.propertyView({ label: trans("labelProp.tooltip")})}
       </Section>
 
       {(editorModeStatus === "logic" || editorModeStatus === "both") && (
@@ -204,7 +206,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
     <ButtonCompWrapper $disabled={props.disabled}>
       <EditorContext.Consumer>
         {(editorState) => (
-          <Tooltip title={props.text}>
+          <Tooltip title={props.tooltip}>
             <Button100
               ref={props.viewRef}
               $buttonStyle={props.style}

client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

@@ -66,6 +66,7 @@ const ToggleTmpComp = (function () {
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
+    tooltip: StringControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
     const text = props.showText
@@ -79,7 +80,7 @@ const ToggleTmpComp = (function () {
         $showBorder={props.showBorder}
         $animationStyle={props.animationStyle}
       >
-        <Tooltip title={props.value.value ? props.trueText : props.falseText}>
+        <Tooltip title={props.tooltip}>
           <Button100
             ref={props.viewRef}
             $buttonStyle={props.style}
@@ -117,6 +118,7 @@ const ToggleTmpComp = (function () {
             </Section>
             <Section name={sectionNames.advanced}>
               {children.showText.propertyView({ label: trans("toggleButton.showText") })}
+              {children.tooltip.propertyView({label: trans("labelProp.tooltip")})}
               {children.showText.getView() && 
                 children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })}
               {children.showText.getView() &&

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

@@ -201,7 +201,8 @@ const childrenMap = {
   iconScoutAsset: IconscoutControl(AssetType.ICON),
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
+  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton'),
+  tooltip: StringControl
 };
 
 let ButtonTmpComp = (function () {
@@ -259,7 +260,7 @@ let ButtonTmpComp = (function () {
                   : undefined
               }
             >
-              <Tooltip title={trans("meeting.meetingControlCompName")}>
+              <Tooltip title={props.tooltip}>
                 <Button100
                   ref={props.viewRef}
                   $buttonStyle={props.style}
@@ -323,6 +324,9 @@ let ButtonTmpComp = (function () {
           {children.sourceMode.getView() === 'asset-library' &&children.iconScoutAsset.propertyView({
             label: trans("button.icon"),
           })}
+          {children.tooltip.propertyView({ 
+            label: trans("labelProp.tooltip"), 
+          })}
         </Section>
 
         {(useContext(EditorContext).editorModeStatus === "logic" ||

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -231,11 +231,7 @@ let CheckboxBasicComp = (function () {
       return props.options
         .filter((option) => option.value !== undefined && !option.hidden)
         .map((option) => ({
-          label: (
-            <Tooltip title={option.label}>
-              <span>{option.label}</span>
-            </Tooltip>
-          ),
+          label: option.label,
           value: option.value,
           disabled: option.disabled,
         }));

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -134,11 +134,7 @@ const MemoizedRadio = memo(({
     return options
       .filter((option) => option.value !== undefined && !option.hidden)
       .map((option) => ({
-        label: (
-          <Tooltip title={option.label}>
-              <span>{option.label}</span>
-          </Tooltip>
-        ),
+        label: option.label,
         value: option.value,
         disabled: option.disabled,
       }));