fix: form: add portal prop to tooltip to fix tooltip in modal (#424)

* fix: form: add portal prop to tooltip to fix tooltip in modal * chore: form: pass parent element to tooltip portal
EightfoldAI · Oct 19, 2022 · 5c6beed · 5c6beed
1 parent 079438b
commit 5c6beed
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -1478,6 +1478,7 @@ const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
                         name={'name'}
                         label={'Name'}
                         rules={[{ required: true }]}
+                        tooltip={<span>A Tooltip!</span>}
                     >
                         <TextInput />
                     </Form.Item>

diff --git a/src/components/Form/Form.types.ts b/src/components/Form/Form.types.ts
@@ -146,6 +146,10 @@ export interface FormItemLabelProps {
      * Set sub label `htmlFor`
      */
     htmlFor?: string;
+    /**
+     * The parent element ref.
+     */
+    itemRef?: React.MutableRefObject<HTMLDivElement>;
     /**
      * Label text
      */

diff --git a/src/components/Form/FormItem/ItemHolder.tsx b/src/components/Form/FormItem/ItemHolder.tsx
@@ -177,6 +177,7 @@ export default function ItemHolder(props: ItemHolderProps) {
             >
                 <FormItemLabel
                     htmlFor={fieldId}
+                    itemRef={itemRef}
                     required={isRequired}
                     requiredMark={requiredMark}
                     {...props}

diff --git a/src/components/Form/FormItemLabel.tsx b/src/components/Form/FormItemLabel.tsx
@@ -33,11 +33,12 @@ function toTooltipProps(tooltip: LabelTooltipType): WrapperTooltipProps | null {
 }
 
 const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean }> = ({
-    label,
+    colon,
     htmlFor,
-    labelCol,
+    itemRef,
+    label,
     labelAlign,
-    colon,
+    labelCol,
     required,
     requiredMark,
     tooltip,
@@ -98,7 +99,11 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean }> = ({
                         ...restTooltipProps
                     } = tooltipProps;
                     const tooltipNode = (
-                        <Tooltip {...restTooltipProps}>
+                        <Tooltip
+                            portal
+                            portalRoot={itemRef?.current}
+                            {...restTooltipProps}
+                        >
                             {React.cloneElement(icon, {
                                 className: styles.formItemTooltip,
                                 title: '',