From 2277cf026f6cc8397041936d220d6d19ca7c1fa4 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Fri, 29 Jul 2022 16:21:21 +0800
Subject: [PATCH] feat(comp:form): support message in tooltip

---
 packages/cdk/popper/docs/Index.zh.md          |   6 +-
 packages/cdk/popper/src/hooks.ts              |   9 +-
 packages/cdk/popper/src/types.ts              |   6 +-
 packages/cdk/popper/src/usePopper.ts          |  33 +++---
 .../_private/overlay/src/Overlay.tsx          |  20 +++-
 .../_private/overlay/style/index.less         |   8 +-
 .../style/themes/default.variable.less        |   2 +-
 packages/components/dropdown/style/index.less |   2 +-
 .../form/demo/CustomizedValidation.vue        |   6 +-
 .../components/form/demo/MessageTooltip.md    |  14 +++
 .../components/form/demo/MessageTooltip.vue   | 100 ++++++++++++++++
 packages/components/form/docs/Index.zh.md     |   2 +
 packages/components/form/src/FormItem.tsx     | 112 ++++++++++++++----
 .../form/src/composables/useFormItem.ts       |  33 +++---
 packages/components/form/src/types.ts         |  17 ++-
 packages/components/form/style/index.less     |  15 +--
 packages/components/form/style/mixin.less     |  11 +-
 packages/components/form/style/status.less    |  32 ++---
 packages/components/style/motion/fade.less    |  22 ++++
 packages/components/tooltip/src/types.ts      |   1 +
 .../tooltip/src/useTooltipOverlay.ts          |   2 +-
 packages/components/tooltip/style/index.less  |   4 -
 22 files changed, 333 insertions(+), 124 deletions(-)
 create mode 100644 packages/components/form/demo/MessageTooltip.md
 create mode 100644 packages/components/form/demo/MessageTooltip.vue

diff --git a/packages/cdk/popper/docs/Index.zh.md b/packages/cdk/popper/docs/Index.zh.md
index 4aa14ab7f..7b06f1c71 100644
--- a/packages/cdk/popper/docs/Index.zh.md
+++ b/packages/cdk/popper/docs/Index.zh.md
@@ -48,11 +48,11 @@ export type PopperTrigger = 'click' | 'hover' | 'focus' | 'contextmenu' | 'manua
 | `destroy` | 销毁浮层 | `(): void` | - | - | - |
 | `visibility` | 浮层显示状态 | `ComputedRef<boolean>` | -| - | - |
 | `placement` | 浮层位置 | `ComputedRef<PopperPlacement>` | - | - | - |
-| `triggerRef` | 浮层的触发元素 | `Ref<TE \| null>` | - | - |
+| `triggerRef` | 浮层的触发元素 | `Ref<TE \| undefined>` | - | - |
 | `triggerEvents` | 浮层触发元素的事件 | `ComputedRef<PopperTriggerEvents>` | - | - | 需要手动绑定到触发元素上 |
-| `popperRef` | 浮层的容器元素 | `Ref<TE \| null>` | - | - |
+| `popperRef` | 浮层的容器元素 | `Ref<TE \| undefined>` | - | - |
 | `popperEvents` | 浮层容器容器的事件 | `ComputedRef<PopperEvents>` | - | - | 需要手动绑定到浮层容器元素上 |
-| `arrowRef` | 浮层的箭头元素 | `Ref<HTMLElement \| null>` | - | - | - |
+| `arrowRef` | 浮层的箭头元素 | `Ref<HTMLElement \| undefined>` | - | - | - |
 
 ```ts
 
diff --git a/packages/cdk/popper/src/hooks.ts b/packages/cdk/popper/src/hooks.ts
index 1fa6d8742..08e18a239 100644
--- a/packages/cdk/popper/src/hooks.ts
+++ b/packages/cdk/popper/src/hooks.ts
@@ -6,20 +6,15 @@
  */
 
 import type { PopperEvents, PopperOptions, PopperPlacement, PopperTriggerEvents } from './types'
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef } from 'vue'
 
 import { computed, reactive, ref, watch } from 'vue'
 
 import { NoopFunction, NoopObject } from '@idux/cdk/utils'
 
-export function useElement<T>(): Ref<T | null> {
-  const element: Ref<T | null> = ref(null)
-  return element
-}
-
 const defaultDelay = 0
 
-export function useState(options: PopperOptions): Required<PopperOptions> {
+export function useReactiveOptions(options: PopperOptions): Required<PopperOptions> {
   const {
     allowEnter = true,
     autoAdjust = true,
diff --git a/packages/cdk/popper/src/types.ts b/packages/cdk/popper/src/types.ts
index 1fed1ab87..90f0037d1 100644
--- a/packages/cdk/popper/src/types.ts
+++ b/packages/cdk/popper/src/types.ts
@@ -136,7 +136,7 @@ export interface PopperInstance<TE extends PopperElement = PopperElement, PE ext
    * The truth DOM node of the trigger.
    * The caller needs to bind the variable to the view.
    */
-  triggerRef: Ref<TE | null>
+  triggerRef: Ref<TE | undefined>
   /**
    * Manually bind to the event on the trigger.
    */
@@ -145,7 +145,7 @@ export interface PopperInstance<TE extends PopperElement = PopperElement, PE ext
    * The truth DOM node of the popper.
    * The caller needs to bind the variable to the view.
    */
-  popperRef: Ref<PE | null>
+  popperRef: Ref<PE | undefined>
   /**
    * Manually bind to events on the popper.
    */
@@ -154,5 +154,5 @@ export interface PopperInstance<TE extends PopperElement = PopperElement, PE ext
    * The truth DOM node of the arrow.
    * The caller needs to bind the variable to the view.
    */
-  arrowRef: Ref<HTMLElement | null>
+  arrowRef: Ref<HTMLElement | undefined>
 }
diff --git a/packages/cdk/popper/src/usePopper.ts b/packages/cdk/popper/src/usePopper.ts
index 36d4f5bf2..16bb12173 100644
--- a/packages/cdk/popper/src/usePopper.ts
+++ b/packages/cdk/popper/src/usePopper.ts
@@ -5,12 +5,9 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { PopperElement, PopperInstance, PopperOptions } from './types'
-import type { Instance } from '@popperjs/core'
+import { type WatchStopHandle, ref, watch } from 'vue'
 
-import { WatchStopHandle, watch } from 'vue'
-
-import { createPopper } from '@popperjs/core'
+import { type Instance, createPopper } from '@popperjs/core'
 import { isEqual } from 'lodash-es'
 
 import { convertElement } from '@idux/cdk/utils'
@@ -18,14 +15,14 @@ import { convertElement } from '@idux/cdk/utils'
 import {
   useBaseOptions,
   useDelay,
-  useElement,
   usePlacement,
   usePopperEvents,
-  useState,
+  useReactiveOptions,
   useTimer,
   useTriggerEvents,
   useVisibility,
 } from './hooks'
+import { type PopperElement, type PopperInstance, type PopperOptions } from './types'
 import { convertOptions } from './utils'
 
 export function usePopper<TE extends PopperElement = PopperElement, PE extends PopperElement = PopperElement>(
@@ -33,11 +30,11 @@ export function usePopper<TE extends PopperElement = PopperElement, PE extends P
 ): PopperInstance<TE, PE> {
   let popperInstance: Instance | null = null
 
-  const triggerRef = useElement<TE>()
-  const popperRef = useElement<PE>()
-  const arrowRef = useElement<HTMLElement>()
+  const triggerRef = ref<TE>()
+  const popperRef = ref<PE>()
+  const arrowRef = ref<HTMLElement>()
 
-  const state = useState(options)
+  const state = useReactiveOptions(options)
   const baseOptions = useBaseOptions(state)
   const visibility = useVisibility(state)
   const { placement, updatePlacement } = usePlacement(state)
@@ -126,11 +123,15 @@ export function usePopper<TE extends PopperElement = PopperElement, PE extends P
     }
   })
 
-  watch([baseOptions, arrowRef], ([currBaseOptions, arrowElement]) => {
-    popperInstance?.setOptions(
-      convertOptions(currBaseOptions, { arrowElement: convertElement(arrowElement), updatePlacement }),
-    )
-  })
+  watch(
+    [baseOptions, arrowRef],
+    ([currBaseOptions, arrowElement]) => {
+      popperInstance?.setOptions(
+        convertOptions(currBaseOptions, { arrowElement: convertElement(arrowElement), updatePlacement }),
+      )
+    },
+    { flush: 'post' },
+  )
 
   return {
     visibility,
diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx
index c0209733b..5dcc31566 100644
--- a/packages/components/_private/overlay/src/Overlay.tsx
+++ b/packages/components/_private/overlay/src/Overlay.tsx
@@ -92,16 +92,24 @@ export default defineComponent({
     }
 
     return () => {
-      const triggerNode = getFirstValidNode(slots.default?.())
-      if (!triggerNode) {
+      const triggerNodes = slots.default?.()
+      const triggerNode = getFirstValidNode(triggerNodes)
+      if (!triggerNode || triggerNodes!.length > 1) {
         __DEV__ && Logger.warn('components/overlay', 'Trigger must is single rooted node')
         return null
       }
+      const trigger = renderTrigger(props, triggerNode, { ref: triggerRef, ...triggerEvents.value }, handleClickOutside)
       const contentNode = slots.content?.()
       if (!getFirstValidNode(contentNode)) {
-        return triggerNode
+        // 避免没有 content 时, trigger 被重新创建
+        return (
+          <>
+            {trigger}
+            <CdkPortal target={props.target} load={false}></CdkPortal>
+          </>
+        )
       }
-      const trigger = renderTrigger(props, triggerNode, { ref: triggerRef, ...triggerEvents.value }, handleClickOutside)
+
       const content = renderContent(
         props,
         mergedPrefixCls,
@@ -141,8 +149,8 @@ function renderContent(
   visibility: ComputedRef<boolean>,
   currentZIndex: ComputedRef<number>,
   contentNode: VNode[],
-  arrowRef: Ref<PopperElement | null>,
-  popperRef: Ref<PopperElement | null>,
+  arrowRef: Ref<PopperElement | undefined>,
+  popperRef: Ref<PopperElement | undefined>,
   popperEvents: ComputedRef<PopperEvents>,
   attrs: Record<string, unknown>,
 ) {
diff --git a/packages/components/_private/overlay/style/index.less b/packages/components/_private/overlay/style/index.less
index 899c5bc20..31cd9c461 100644
--- a/packages/components/_private/overlay/style/index.less
+++ b/packages/components/_private/overlay/style/index.less
@@ -17,7 +17,7 @@
       bottom: 0;
 
       &::before {
-        bottom: -@overlay-arrow-size + 1px;
+        bottom: -@overlay-arrow-size;
         left: 0;
         border-width: @overlay-arrow-size @overlay-arrow-size 0;
         border-top-color: initial;
@@ -31,7 +31,7 @@
       top: 0;
 
       &::before {
-        top: -@overlay-arrow-size + 1px;
+        top: -@overlay-arrow-size;
         left: 0;
         border-width: 0 @overlay-arrow-size @overlay-arrow-size;
         border-bottom-color: initial;
@@ -47,7 +47,7 @@
       &::before {
         border-width: @overlay-arrow-size 0 @overlay-arrow-size @overlay-arrow-size;
         border-left-color: initial;
-        right: -@overlay-arrow-size + 1px;
+        right: -@overlay-arrow-size;
         transform-origin: center left;
       }
     }
@@ -58,7 +58,7 @@
       left: 0;
 
       &::before {
-        left: -@overlay-arrow-size + 1px;
+        left: -@overlay-arrow-size;
         border-width: @overlay-arrow-size @overlay-arrow-size @overlay-arrow-size 0;
         border-right-color: initial;
         transform-origin: center right;
diff --git a/packages/components/_private/overlay/style/themes/default.variable.less b/packages/components/_private/overlay/style/themes/default.variable.less
index 47480a3fb..f22e3dd48 100644
--- a/packages/components/_private/overlay/style/themes/default.variable.less
+++ b/packages/components/_private/overlay/style/themes/default.variable.less
@@ -1 +1 @@
-@overlay-arrow-size: 8px;
+@overlay-arrow-size: 6px;
diff --git a/packages/components/dropdown/style/index.less b/packages/components/dropdown/style/index.less
index 9cc33cde5..fd2134504 100644
--- a/packages/components/dropdown/style/index.less
+++ b/packages/components/dropdown/style/index.less
@@ -14,7 +14,7 @@
     cursor: pointer;
   }
 
-  .@{idux-prefix}-overlay-arrow {
+  .@{overlay-prefix}-arrow {
     color: @dropdown-overlay-arrow-color;
   }
 }
diff --git a/packages/components/form/demo/CustomizedValidation.vue b/packages/components/form/demo/CustomizedValidation.vue
index 85166fd12..8017d9d7f 100644
--- a/packages/components/form/demo/CustomizedValidation.vue
+++ b/packages/components/form/demo/CustomizedValidation.vue
@@ -1,12 +1,12 @@
 <template>
   <IxForm class="demo-form" labelCol="6">
-    <IxFormItem label="Valid" status="valid" :message="messageMap.valid">
+    <IxFormItem label="Valid" status="valid" :message="messageMap">
       <IxInput v-model:value="formValue.valid"></IxInput>
     </IxFormItem>
-    <IxFormItem label="Validating" status="validating" :message="messageMap.validating">
+    <IxFormItem label="Validating" status="validating" :message="messageMap">
       <IxInput v-model:value="formValue.validating"></IxInput>
     </IxFormItem>
-    <IxFormItem label="Invalid" status="invalid" :message="messageMap.invalid">
+    <IxFormItem label="Invalid" status="invalid" :message="messageMap">
       <IxInput v-model:value="formValue.invalid"></IxInput>
     </IxFormItem>
     <IxFormItem label="Dynamic" :status="status" :message="getMessage">
diff --git a/packages/components/form/demo/MessageTooltip.md b/packages/components/form/demo/MessageTooltip.md
new file mode 100644
index 000000000..9eec0097b
--- /dev/null
+++ b/packages/components/form/demo/MessageTooltip.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 悬浮提示
+  en: Message in tooltip
+order: 30
+---
+
+## zh
+
+悬浮提示，一般用于紧凑型的表单中。
+
+## en
+
+The message in tooltip, usually used in compact forms.
diff --git a/packages/components/form/demo/MessageTooltip.vue b/packages/components/form/demo/MessageTooltip.vue
new file mode 100644
index 000000000..6f7025d10
--- /dev/null
+++ b/packages/components/form/demo/MessageTooltip.vue
@@ -0,0 +1,100 @@
+<template>
+  <IxFormWrapper :control="formGroup">
+    <IxTable :columns="columns" :dataSource="data">
+      <template #name="{ value, record }">
+        <span v-if="!record.editable">{{ value }}</span>
+        <IxFormItem v-else messageTooltip>
+          <IxInput control="name"></IxInput>
+        </IxFormItem>
+      </template>
+      <template #age="{ value, record }">
+        <span v-if="!record.editable">{{ value }}</span>
+        <IxFormItem v-else messageTooltip>
+          <IxInputNumber control="age"></IxInputNumber>
+        </IxFormItem>
+      </template>
+      <template #address="{ value, record }">
+        <span v-if="!record.editable">{{ value }}</span>
+        <IxFormItem v-else messageTooltip>
+          <IxInput control="address"></IxInput>
+        </IxFormItem>
+      </template>
+      <template #action="{ record }">
+        <IxSpace v-if="record.editable">
+          <IxButton @click="onSave">Save</IxButton>
+          <IxButton @click="onCancel">Cancel</IxButton>
+        </IxSpace>
+      </template>
+    </IxTable>
+  </IxFormWrapper>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { Validators, useFormGroup } from '@idux/cdk/forms'
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key?: number
+  name?: string
+  age?: number
+  address?: string
+  editable?: boolean
+}
+const { required, range, maxLength } = Validators
+const formGroup = useFormGroup<Data>({
+  name: ['', required],
+  age: [undefined, [required, range(18, 99)]],
+  address: ['', maxLength(100)],
+})
+
+const onSave = () => {
+  if (formGroup.valid.value) {
+    console.log('onSave', formGroup.getValue())
+  } else {
+    formGroup.markAsDirty()
+  }
+}
+
+const onCancel = () => {
+  formGroup.reset()
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customCell: 'name',
+    width: 150,
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+    customCell: 'age',
+    width: 120,
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+    customCell: 'address',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    customCell: 'action',
+  },
+]
+
+const data = ref<Data[]>([])
+
+for (let index = 0; index < 3; index++) {
+  data.value.push({
+    key: index,
+    name: `Edrward ${index}`,
+    age: 18 + index,
+    address: `London Park no. ${index}`,
+    editable: index === 0,
+  })
+}
+</script>
diff --git a/packages/components/form/docs/Index.zh.md b/packages/components/form/docs/Index.zh.md
index 1a4a51f49..22be8f8c6 100644
--- a/packages/components/form/docs/Index.zh.md
+++ b/packages/components/form/docs/Index.zh.md
@@ -22,6 +22,7 @@ order: 0
 | `labelCol` | 配置 `IxFormItem` 的 `labelCol` 默认值 | `number \| ColProps` | - | - | - |
 | `labelTooltipIcon` | 配置表单文本的提示信息icon | `string` | `'question-circle'` | ✅ | - |
 | `layout` | 表单布局 | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` | ✅ | - |
+| `messageTooltip` | 以 tooltip 的形式提示错误信息 | `boolean \| TooltipProps` | `false` | - | - |
 | `size` | 表单大小 | `'sm' \| 'md' \| 'lg'` | `'md'` | ✅ | - |
 
 ### IxFormItem
@@ -48,6 +49,7 @@ order: 0
 | `labelTooltipIcon` | 配置表单文本的提示信息icon | `string` | - | -| - |
 | `required` | 必填样式设置 | `boolean` | `false` | - | 仅控制样式 |
 | `message` | 手动指定表单项的校验提示 | `string \| (control?: AbstractControl) => string` | - | - | 传入 `string` 时，为 `invalid` 状态的提示 |
+| `messageTooltip` | 以 tooltip 的形式提示错误信息 | `boolean \| TooltipProps` | `false` | - | - |
 | `status` | 手动指定表单项的校验状态 | `valid \| invalid \| validating` | - | - | - |
 
 ### IxFormWrapper
diff --git a/packages/components/form/src/FormItem.tsx b/packages/components/form/src/FormItem.tsx
index fe4246edd..cc1cab99d 100644
--- a/packages/components/form/src/FormItem.tsx
+++ b/packages/components/form/src/FormItem.tsx
@@ -5,15 +5,26 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, type Slot, type Slots, computed, defineComponent, inject, normalizeClass } from 'vue'
+import {
+  type ComputedRef,
+  type Slot,
+  type Slots,
+  Transition,
+  VNodeChild,
+  computed,
+  defineComponent,
+  inject,
+  normalizeClass,
+} from 'vue'
 
-import { isNumber, isString } from 'lodash-es'
+import { isBoolean, isNumber, isString } from 'lodash-es'
 
+import { ValidateStatus } from '@idux/cdk/forms'
 import { Logger } from '@idux/cdk/utils'
-import { useGlobalConfig } from '@idux/components/config'
+import { CommonConfig, useGlobalConfig } from '@idux/components/config'
 import { type ColProps, IxCol, IxRow } from '@idux/components/grid'
 import { IxIcon } from '@idux/components/icon'
-import { IxTooltip } from '@idux/components/tooltip'
+import { IxTooltip, TooltipProps } from '@idux/components/tooltip'
 
 import { useFormItem } from './composables/useFormItem'
 import { formToken } from './token'
@@ -37,6 +48,8 @@ export default defineComponent({
     const controlTooltipIcon = computed(
       () => props.controlTooltipIcon ?? formProps?.controlTooltipIcon ?? config?.controlTooltipIcon,
     )
+    const mergedMessageTooltip = computed(() => props.messageTooltip ?? formProps?.messageTooltip)
+
     const { status, statusIcon, message } = useFormItem(props, formProps)
 
     const classes = computed(() => {
@@ -44,7 +57,6 @@ export default defineComponent({
       const currStatus = status.value
       return normalizeClass({
         [prefixCls]: true,
-        [`${prefixCls}-with-message`]: !!message.value,
         [`${prefixCls}-with-status-icon`]: !!statusIcon.value,
         [`${prefixCls}-${currStatus}`]: !!currStatus,
       })
@@ -65,7 +77,18 @@ export default defineComponent({
       return (
         <IxRow class={classes.value}>
           {renderLabel(props, slots, labelClasses, labelColConfig, labelTooltipIcon, prefixCls)}
-          {renderControl(props, slots, controlColConfig, controlTooltipIcon, statusIcon, message, prefixCls)}
+          {renderControl(
+            props,
+            slots,
+            common,
+            controlColConfig,
+            controlTooltipIcon,
+            status,
+            statusIcon,
+            message,
+            mergedMessageTooltip,
+            prefixCls,
+          )}
         </IxRow>
       )
     }
@@ -92,7 +115,7 @@ function renderLabel(
   const tooltipNode = renderTooltip(labelTooltipSlot, labelTooltip, labelTooltipIcon.value)
   return (
     <IxCol class={classes.value} {...labelColConfig.value}>
-      <label for={labelFor}>
+      <label for={labelFor as string}>
         {labelSlot ? labelSlot() : label}
         {tooltipNode && <span class={`${prefixCls}-label-tooltip`}>{tooltipNode}</span>}
       </label>
@@ -100,13 +123,17 @@ function renderLabel(
   )
 }
 
+// TODO: refactor
 function renderControl(
   props: FormItemProps,
   slots: Slots,
+  common: CommonConfig,
   controlColConfig: ComputedRef<ColProps | undefined>,
   controlTooltipIcon: ComputedRef<string | undefined>,
+  status: ComputedRef<ValidateStatus | undefined>,
   statusIcon: ComputedRef<string | undefined>,
   message: ComputedRef<string | undefined>,
+  mergedMessageTooltip: ComputedRef<boolean | TooltipProps | undefined>,
   prefixCls: string,
 ) {
   const { controlTooltip, description, extra, extraMessage } = props
@@ -123,28 +150,73 @@ function renderControl(
   if (__DEV__ && (extraMessage || extraMessageSlot)) {
     Logger.warn('components/form', '`extraMessage` was deprecated, please use `description` instead.')
   }
-  const statusNode = statusIcon.value && (
-    <span class={`${prefixCls}-status-icon`}>
-      <IxIcon name={statusIcon.value} />
-    </span>
-  )
+
   const tooltipNode = renderTooltip(controlTooltipSlot, controlTooltip, controlTooltipIcon.value)
-  const messageNode = messageSlot ? messageSlot(message.value) : message.value
+  const inputNode = (
+    <div class={`${prefixCls}-control-input`}>
+      <div class={`${prefixCls}-control-input-content`}>{slots.default && slots.default()}</div>
+      {statusIcon.value && (
+        <span class={`${prefixCls}-status-icon`}>
+          <IxIcon name={statusIcon.value} />
+        </span>
+      )}
+      {tooltipNode && <span class={`${prefixCls}-control-tooltip`}>{tooltipNode}</span>}
+    </div>
+  )
+  const tooltipProps = convertTooltipProps(mergedMessageTooltip.value, message.value, prefixCls)
+
   const _descriptionSlot = extraSlot || extraMessageSlot || descriptionSlot
   const descriptionNode = _descriptionSlot ? _descriptionSlot() : extra || extraMessage || description
+
+  const children: VNodeChild[] = []
+  if (tooltipProps) {
+    const tooltipSlots = {
+      default: () => inputNode,
+      title: messageSlot,
+    }
+    children.push(<IxTooltip v-slots={tooltipSlots} {...tooltipProps} />)
+  } else {
+    children.push(inputNode)
+    const messageNode = messageSlot ? messageSlot() : message.value
+    if (!descriptionNode || messageNode) {
+      children.push(
+        <div class={`${prefixCls}-message`}>
+          <Transition name={`${common.prefixCls}-fade-down`}>
+            {messageNode && <div class={`${prefixCls}-message-${status.value}`}>{messageNode}</div>}
+          </Transition>
+        </div>,
+      )
+    }
+  }
+
+  if (descriptionNode) {
+    children.push(<div class={`${prefixCls}-description`}>{descriptionNode}</div>)
+  }
+
   return (
     <IxCol class={`${prefixCls}-control`} {...controlColConfig.value}>
-      <div class={`${prefixCls}-control-input`}>
-        <div class={`${prefixCls}-control-input-content`}>{slots.default && slots.default()}</div>
-        {statusNode}
-        {tooltipNode && <span class={`${prefixCls}-control-tooltip`}>{tooltipNode}</span>}
-      </div>
-      {message.value && <div class={`${prefixCls}-message`}>{messageNode}</div>}
-      {descriptionNode && <div class={`${prefixCls}-description`}>{descriptionNode}</div>}
+      {children}
     </IxCol>
   )
 }
 
+function convertTooltipProps(
+  messageTooltip: boolean | TooltipProps | undefined,
+  title: string | undefined,
+  prefixCls: string,
+): (TooltipProps & { class: string }) | undefined {
+  if (!messageTooltip) {
+    return undefined
+  }
+  const tooltipProps: TooltipProps & { class: string } = {
+    class: `${prefixCls}-message-tooltip`,
+    offset: [0, 6],
+    placement: 'bottomStart',
+    title,
+  }
+  return isBoolean(messageTooltip) ? tooltipProps : { ...tooltipProps, ...messageTooltip }
+}
+
 function renderTooltip(slot: Slot | undefined, tooltip: string | undefined, iconName: string | undefined) {
   if (slot) {
     return slot()
diff --git a/packages/components/form/src/composables/useFormItem.ts b/packages/components/form/src/composables/useFormItem.ts
index 67e1b8976..980598058 100644
--- a/packages/components/form/src/composables/useFormItem.ts
+++ b/packages/components/form/src/composables/useFormItem.ts
@@ -93,9 +93,9 @@ function useStatus(props: FormItemProps, control: Ref<AbstractControl | undefine
     if (!currControl) {
       return undefined
     }
-    const { trigger, dirty, blurred } = currControl
+    const { trigger, dirty, blurred, status } = currControl
     if ((trigger === 'change' && dirty.value) || (trigger === 'blur' && blurred.value)) {
-      return currControl.status.value
+      return status.value
     }
     return undefined
   })
@@ -140,29 +140,29 @@ function useMessage(
   status: ComputedRef<ValidateStatus | undefined>,
 ) {
   const locale = useGlobalConfig('locale')
-  /**
-   * @deprecated
-   */
-  const messages = computed(() => {
-    const message = props.message
-    return isString(message) || isFunction(message) ? { invalid: message } : message || {}
-  })
+
   return computed(() => {
     const currStatus = status.value
     if (!currStatus) {
       return undefined
     }
 
-    const currMessage = messages.value[currStatus]
+    const currMessage = props.message
     if (currMessage) {
-      return isString(currMessage) ? currMessage : currMessage(control.value!)
+      if (isFunction(currMessage)) {
+        return currMessage(control.value)
+      }
+      if (isObject(currMessage)) {
+        return currMessage[currStatus]
+      }
+      return currStatus === 'invalid' ? currMessage : undefined
     }
 
-    return getMessage(control, locale)
+    return getMessageByControl(control, locale)
   })
 }
 
-function getMessage(control: Ref<AbstractControl | undefined>, locale: Locale) {
+function getMessageByControl(control: Ref<AbstractControl | undefined>, locale: Locale) {
   const currControl = control.value
   if (!currControl) {
     return undefined
@@ -180,11 +180,10 @@ function getMessage(control: Ref<AbstractControl | undefined>, locale: Locale) {
         return message(rest, currControl)
       }
 
-      const currMessage = message[locale.type]
-      if (isString(currMessage)) {
-        return currMessage
+      const i18nMessage = message[locale.type]
+      if (i18nMessage) {
+        return isFunction(i18nMessage) ? i18nMessage(rest, currControl) : i18nMessage
       }
-      return currMessage(rest, currControl)
     }
   }
   return undefined
diff --git a/packages/components/form/src/types.ts b/packages/components/form/src/types.ts
index d387b8c6c..59ba6bb5b 100644
--- a/packages/components/form/src/types.ts
+++ b/packages/components/form/src/types.ts
@@ -8,6 +8,7 @@
 import type { AbstractControl, ValidateStatus } from '@idux/cdk/forms'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
 import type { ColProps, RowProps } from '@idux/components/grid'
+import type { TooltipProps } from '@idux/components/tooltip'
 import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 const colProp = [Number, String, Object] as PropType<number | string | ColProps>
@@ -31,6 +32,7 @@ export const formProps = {
   labelCol: colProp,
   labelTooltipIcon: String,
   layout: String as PropType<FormLayout>,
+  messageTooltip: { type: [Boolean, Object] as PropType<boolean | TooltipProps>, default: false },
   size: String as PropType<FormSize>,
   /**
    * @deprecated
@@ -46,11 +48,6 @@ export type FormPublicProps = Omit<ExtractPublicPropTypes<typeof formProps>, 'ha
 export type FormComponent = DefineComponent<Omit<HTMLAttributes, keyof FormPublicProps> & FormPublicProps>
 export type FormInstance = InstanceType<DefineComponent<FormProps>>
 
-export type FormColType = number | string | ColProps
-export type FormLabelAlign = 'start' | 'end'
-export type FormLayout = 'horizontal' | 'vertical' | `inline`
-export type FormSize = 'sm' | 'md' | 'lg'
-
 export const formItemProps = {
   colonless: {
     type: Boolean,
@@ -86,7 +83,10 @@ export const formItemProps = {
     type: Boolean,
     default: false,
   },
-  message: [String, Function, Object] as PropType<string | ((control: AbstractControl) => string)>,
+  message: [String, Function, Object] as PropType<
+    string | ((control?: AbstractControl) => string) | Partial<Record<ValidateStatus, string>>
+  >,
+  messageTooltip: { type: [Boolean, Object] as PropType<boolean | TooltipProps>, default: undefined },
   status: String as PropType<ValidateStatus>,
   /**
    * @deprecated
@@ -117,3 +117,8 @@ export type FormWrapperComponent = DefineComponent<
   Omit<HTMLAttributes, keyof FormWrapperPublicProps> & FormWrapperPublicProps
 >
 export type FormWrapperInstance = InstanceType<DefineComponent<FormItemProps>>
+
+export type FormColType = number | string | ColProps
+export type FormLabelAlign = 'start' | 'end'
+export type FormLayout = 'horizontal' | 'vertical' | `inline`
+export type FormSize = 'sm' | 'md' | 'lg'
diff --git a/packages/components/form/style/index.less b/packages/components/form/style/index.less
index 3e2dced24..726bfbf84 100644
--- a/packages/components/form/style/index.less
+++ b/packages/components/form/style/index.less
@@ -1,4 +1,6 @@
 @import '../../style/mixins/reset.less';
+@import '../../style/motion/fade.less';
+
 @import './mixin.less';
 @import './status.less';
 @import './layout.less';
@@ -22,11 +24,13 @@
 .@{form-item-prefix} {
   .reset-component();
 
-  margin-bottom: @form-item-margin-bottom;
-  vertical-align: top;
+  &-message-tooltip.@{tooltip-prefix} {
+    background-color: fade(@form-item-invalid-color, 80%);
+    color: @color-white;
 
-  &-with-message {
-    margin-bottom: 0;
+    .@{overlay-prefix}-arrow {
+      color: fade(@form-item-invalid-color, 80%);
+    }
   }
 
   &-label {
@@ -118,8 +122,5 @@
     color: @form-color-secondary;
     font-size: @form-item-font-size;
     line-height: @form-line-height;
-    transition: color @transition-duration-base @ease-in-out;
-
-    .form-message-extra-distance((@form-item-margin-bottom - @form-item-font-height) / 2);
   }
 }
diff --git a/packages/components/form/style/mixin.less b/packages/components/form/style/mixin.less
index e5074030d..162d14833 100644
--- a/packages/components/form/style/mixin.less
+++ b/packages/components/form/style/mixin.less
@@ -42,13 +42,4 @@
   .@{form-item-prefix}-control-input {
     min-height: @form-height;
   }
-}
-
-.form-message-extra-distance(@distance) when (@distance >= 0) {
-  padding-top: floor(@distance);
-}
-
-.form-message-extra-distance(@distance) when (@distance < 0) {
-  margin-top: ceil(@distance);
-  margin-bottom: ceil(@distance);
-}
+}
\ No newline at end of file
diff --git a/packages/components/form/style/status.less b/packages/components/form/style/status.less
index 36e0946f2..273dac95e 100644
--- a/packages/components/form/style/status.less
+++ b/packages/components/form/style/status.less
@@ -1,4 +1,5 @@
 .@{form-item-prefix} {
+   // TODO: Deprecated
   &-status-icon {
     position: absolute;
     top: 50%;
@@ -15,6 +16,7 @@
     pointer-events: none;
   }
 
+  // TODO: Deprecated
   &-with-status-icon {
     // input
     .@{idux-prefix}-input {
@@ -27,11 +29,7 @@
   }
 
   // === invalid ===
-  &-invalid {
-    .@{form-item-prefix}-message {
-      color: @form-item-invalid-color;
-    }
-
+  &-invalid > &-control {
     .@{form-item-prefix}-status-icon {
       color: @form-item-invalid-color;
     }
@@ -150,26 +148,30 @@
     }
   }
 
-  // === Validating ===
-  &-validating {
-    .@{form-item-prefix}-message {
-      color: @form-item-validating-color;
-    }
+  &-message-invalid {
+    color: @form-item-invalid-color;
+  }
 
+  // === Validating ===
+  &-validating > &-control {
     .@{form-item-prefix}-status-icon {
       display: inline-block;
       color: @form-item-validating-color;
     }
   }
 
-  // === valid ===
-  &-valid {
-    .@{form-item-prefix}-message {
-      color: @form-item-valid-color;
-    }
+  &-message-validating {
+    color: @form-item-validating-color;
+  }
 
+  // === valid ===
+  &-valid > &-control {
     .@{form-item-prefix}-status-icon {
       color: @form-item-valid-color;
     }
   }
+
+  &-message-valid {
+    color: @form-item-valid-color;
+  }
 }
diff --git a/packages/components/style/motion/fade.less b/packages/components/style/motion/fade.less
index e6a4d05d7..e5107a2e1 100644
--- a/packages/components/style/motion/fade.less
+++ b/packages/components/style/motion/fade.less
@@ -16,3 +16,25 @@
 
 .fade-motion(fade);
 .fade-motion(fade-fast, @transition-duration-fast);
+
+.@{idux-prefix}-fade-down {
+  &-enter-active{
+    transition: opacity @transition-duration-fast @ease-in-out, transform @transition-duration-fast @ease-in-out;
+  }
+
+  &-leave-active {
+    transition: opacity @transition-duration-fast @ease-in-out, transform @transition-duration-fast @ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/packages/components/tooltip/src/types.ts b/packages/components/tooltip/src/types.ts
index 4bf9c20c7..e1812a947 100644
--- a/packages/components/tooltip/src/types.ts
+++ b/packages/components/tooltip/src/types.ts
@@ -25,6 +25,7 @@ export const tooltipProps = {
     default: undefined,
   },
   delay: ɵOverlayDelayDef,
+  offset: Array as unknown as PropType<[number, number]>,
   placement: ɵOverlayPlacementDef,
   target: {
     type: [String, HTMLElement, Function] as PropType<PortalTargetType>,
diff --git a/packages/components/tooltip/src/useTooltipOverlay.ts b/packages/components/tooltip/src/useTooltipOverlay.ts
index 117fde25a..e41488d59 100644
--- a/packages/components/tooltip/src/useTooltipOverlay.ts
+++ b/packages/components/tooltip/src/useTooltipOverlay.ts
@@ -42,7 +42,7 @@ export function useTooltipOverlay(
       clickOutside: trigger === 'click' || trigger === 'contextmenu',
       delay: props.delay ?? config.delay,
       destroyOnHide: props.destroyOnHide ?? config.destroyOnHide,
-      offset: defaultOffset,
+      offset: props.offset ?? defaultOffset,
       showArrow: true,
       placement: props.placement ?? config.placement,
       target: props.target ?? config.target ?? `${mergedPrefixCls.value}-container`,
diff --git a/packages/components/tooltip/style/index.less b/packages/components/tooltip/style/index.less
index cd077b326..0f06e1c87 100644
--- a/packages/components/tooltip/style/index.less
+++ b/packages/components/tooltip/style/index.less
@@ -24,8 +24,4 @@
   .@{overlay-prefix}-arrow {
     color: @tooltip-background-color;
   }
-
-  .@{idux-prefix}-overlay-arrow {
-    color: @tooltip-background-color;
-  }
 }