tooltip added to autocomplete

Author: MenamAfzal

client/packages/lowcoder-design/src/components/Section.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { ReactComponent as Packup } from "icons/icon-Pack-up.svg";
 import { labelCss } from "./Label";
 import { controlItem, ControlNode } from "./control";
+import { Tooltip } from "./toolTip";
 
 const SectionItem = styled.div<{ $width?: number }>`
   width: ${(props) => (props.$width ? props.$width : 312)}px;
@@ -73,6 +74,12 @@ const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
   padding-right: ${(props) => (props.$noMargin ? 0 : "16px")};
 `;
 
+const TooltipWrapper = styled.a`
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  color:#fff;
+`;
 interface ISectionConfig<T> {
   name?: string;
   open?: boolean;
@@ -81,6 +88,7 @@ interface ISectionConfig<T> {
   style?: React.CSSProperties;
   children: T;
   additionalButton?: React.ReactNode;
+  tooltip?:string
 }
 
 export interface PropertySectionState {
@@ -102,7 +110,8 @@ export const PropertySectionContext = React.createContext<PropertySectionContext
 });
 
 export const BaseSection = (props: ISectionConfig<ReactNode>) => {
-  const { name } = props;
+  const { name,tooltip } = props;
+  console.log("🚀 ~ BaseSection ~ name:", name)
   const { compName, state, toggle } = useContext(PropertySectionContext);
   const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
 
@@ -118,17 +127,27 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
   return (
     <SectionItem $width={props.width} style={props.style}>
       {props.name && (
-        <SectionLabelDiv onClick={handleToggle} className={"section-header"}>
+        <SectionLabelDiv onClick={handleToggle} className={'section-header'}>
           <SectionLabel>{props.name}</SectionLabel>
-          <div style={{ display: "flex" }}>
+          <div style={{display: 'flex'}}>
             {open && props.additionalButton}
-            <PackupIcon deg={open ? "rotate(0deg)" : "rotate(180deg)"} />
+            <PackupIcon deg={open ? 'rotate(0deg)' : 'rotate(180deg)'} />
           </div>
         </SectionLabelDiv>
       )}
-      <ShowChildren $show={open ? "flex" : "none"} $noMargin={props.noMargin}>
-        {props.children}
-      </ShowChildren>
+      <Tooltip
+        title={tooltip && <TooltipWrapper href={tooltip}>{tooltip}</TooltipWrapper>}
+        arrow={{
+          pointAtCenter: true,
+        }}
+        placement="top"
+        color="#2c2c2c"
+        getPopupContainer={(node: any) => node.closest('.react-grid-item')}
+      >
+        <ShowChildren $show={open ? 'flex' : 'none'} $noMargin={props.noMargin}>
+          {props.children}
+        </ShowChildren>
+      </Tooltip>
     </SectionItem>
   );
 };

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

@@ -293,38 +293,38 @@ let AutoCompleteCompBase = (function () {
       return (
         <>
           <Section>
-            {children.autoCompleteType.getView() === "normal" &&
+            {children.autoCompleteType.getView() === 'normal' &&
               children.prefixIcon.propertyView({
-                label: trans("button.prefixIcon"),
+                label: trans('button.prefixIcon'),
               })}
-            {children.autoCompleteType.getView() === "normal" &&
+            {children.autoCompleteType.getView() === 'normal' &&
               children.suffixIcon.propertyView({
-                label: trans("button.suffixIcon"),
+                label: trans('button.suffixIcon'),
               })}
-              {allowClearPropertyView(children)}
+            {allowClearPropertyView(children)}
           </Section>
-          <Section name={trans("autoComplete.SectionDataName")}>
+          <Section name={trans('autoComplete.SectionDataName')}>
             {children.items.propertyView({
-              label: trans("autoComplete.value"),
+              label: trans('autoComplete.value'),
               tooltip: itemsDataTooltip,
-              placeholder: "[]",
+              placeholder: '[]',
             })}
-            {getDayJSLocale() === "zh-cn" &&
+            {getDayJSLocale() === 'zh-cn' &&
               children.searchFirstPY.propertyView({
-                label: trans("autoComplete.searchFirstPY"),
+                label: trans('autoComplete.searchFirstPY'),
               })}
-            {getDayJSLocale() === "zh-cn" &&
+            {getDayJSLocale() === 'zh-cn' &&
               children.searchCompletePY.propertyView({
-                label: trans("autoComplete.searchCompletePY"),
+                label: trans('autoComplete.searchCompletePY'),
               })}
             {children.searchLabelOnly.propertyView({
-              label: trans("autoComplete.searchLabelOnly"),
+              label: trans('autoComplete.searchLabelOnly'),
             })}
             {children.ignoreCase.propertyView({
-              label: trans("autoComplete.ignoreCase"),
+              label: trans('autoComplete.ignoreCase'),
             })}
             {children.valueOrLabel.propertyView({
-              label: trans("autoComplete.checkedValueFrom"),
+              label: trans('autoComplete.checkedValueFrom'),
               radioButton: true,
             })}
           </Section>
@@ -350,7 +350,10 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
-          <Section name={sectionNames.animationStyle}>
+          <Section
+            name={sectionNames.animationStyle}
+            tooltip="https://animate.style/"
+          >
             {children.animationStyle.getPropertyView()}
           </Section>
         </>