diff --git a/packages/devui-vue/devui/form/index.ts b/packages/devui-vue/devui/form/index.ts
index ba7b235ffa70a54c5fd22ef3acc49c3e1763ad64..bdbb61bbf6e0ac8c1efc924b0cbf2356d5bf84fa 100644
--- a/packages/devui-vue/devui/form/index.ts
+++ b/packages/devui-vue/devui/form/index.ts
@@ -32,7 +32,7 @@ export { Form, FormLabel, FormItem, FormControl, FormOperation }
 export default {
   title: 'Form 表单',
   category: '数据录入',
-  status: '70%',
+  status: '75%',
   install(app: App): void {
     app.use(Form as any);
     app.use(FormLabel as any);
diff --git a/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts b/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts
index 658bd0c344c962f1f9d821fe2fbbc423e8d6ec1a..f8a59f2852df6e2c035be9278fcccc2714681fae 100644
--- a/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts
+++ b/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts
@@ -12,6 +12,8 @@ interface ValidateFnParam {
   isFormTag: boolean
   message: string
   messageShowType: MessageShowType
+  dfcUID: string
+  popPosition: PopPosition | Array<BasePopPosition>
 }
 
 interface CustomValidatorRuleObject {
@@ -24,6 +26,7 @@ interface DirectiveValidateRuleOptions {
   updateOn?: UpdateOn
   errorStrategy?: ErrorStrategy
   asyncDebounceTime?: number
+  popPosition?: PopPosition | Array<BasePopPosition>
 }
 
 interface DirectiveBindingValue {
@@ -38,9 +41,18 @@ interface DirectiveCustomRuleItem extends RuleItem {
   asyncValidators: CustomValidatorRuleObject[]
 }
 
+export interface ShowPopoverErrorMessageEventData {
+  showPopover?: boolean 
+  message?: string
+  uid?: string, 
+  popPosition?: PopPosition
+}
+
 type MessageShowType = 'popover' | 'text' | 'none' | 'toast';
 type UpdateOn = 'input' | 'focus' | 'change' | 'blur' | 'submit';
 type ErrorStrategy = 'dirty' | 'pristine';
+type BasePopPosition = 'left' | 'right' | 'top' | 'bottom';
+type PopPosition = BasePopPosition | 'left-top' | 'left-bottom' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right';
 
 enum ErrorStrategyEnum {
   dirty = 'dirty',
@@ -198,7 +210,7 @@ function handleErrorStrategyPass(el: HTMLElement): void {
   el.setAttribute('class', classList.join(' '));
 }
 
-function handleValidateError({el, tipEl, message, isFormTag, messageShowType}: Partial<ValidateFnParam>): void {
+function handleValidateError({el, tipEl, message, isFormTag, messageShowType, dfcUID, popPosition = 'right-bottom'}: Partial<ValidateFnParam>): void {
   // 如果该指令用在form标签上，这里做特殊处理
   if(isFormTag && messageShowType === MessageShowTypeEnum.toast) {
     // todo：待替换为toast
@@ -206,6 +218,12 @@ function handleValidateError({el, tipEl, message, isFormTag, messageShowType}: P
     return;
   }
 
+  // messageShowType为popover时，设置popover
+  if(MessageShowTypeEnum.popover === messageShowType) {
+    EventBus.emit("showPopoverErrorMessage", {showPopover: true, message, uid: dfcUID, popPosition} as ShowPopoverErrorMessageEventData);
+    return;
+  }
+
   tipEl.innerText = '' + message;
   tipEl.style.display = 'inline-flex';
   tipEl.setAttribute('class', 'd-validate-tip');
@@ -225,7 +243,7 @@ function getFormName(binding: DirectiveBinding): string {
 }
 
 // 校验处理函数
-function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType}: Partial<ValidateFnParam>) {
+function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition}: Partial<ValidateFnParam>) {
   validator.validate({modelName: modelValue}).then(() => {
     handleValidatePass(el, tipEl);
   }).catch((err) => {
@@ -240,13 +258,22 @@ function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowTyp
       msg = errors[0].message;
     }
 
-    handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType});
+    handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition});
   })
 }
 
+// 检测popover的position是否是正确值
+function checkValidPopsition(positionStr: string): boolean {
+  const validPosition = ['left', 'right', 'top', 'bottom', 'left-top', 'left-bottom', 'top-left', 'top-right', 'right-top', 'right-bottom', 'bottom-left', 'bottom-right'];
+  const isValid = validPosition.includes(positionStr);
+  !isValid && console.warn(`invalid popPosition value '${positionStr}'.`);
+  return isValid
+}
+
 export default {
   mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void {
     const isFormTag = el.tagName === 'FORM';
+    const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid;
 
     const hasOptions = isObject(binding.value) && hasKey(binding.value, 'options');
 
@@ -259,12 +286,25 @@ export default {
     let { errorStrategy }: DirectiveBindingValue = binding.value;
 
     // errorStrategy可配置在options对象中
-    const { 
+    let { 
       updateOn = UpdateOnEnum.change, 
       errorStrategy: ErrorStrategy = ErrorStrategyEnum.dirty, 
-      asyncDebounceTime = 300
+      asyncDebounceTime = 300,
+      popPosition = ['right', 'bottom']
     }: DirectiveValidateRuleOptions = options;
 
+    // 设置popover的位置
+    if(messageShowType === MessageShowTypeEnum.popover) {
+      if(Array.isArray(popPosition)) {
+        popPosition = (popPosition.length > 1 ? popPosition.join('-') : popPosition[0]) as PopPosition;
+        if(!checkValidPopsition(popPosition)) {
+          popPosition = 'right-bottom';
+        }
+      }else if(!checkValidPopsition(popPosition)) {
+        popPosition = 'right-bottom';
+      }
+    }
+
     if(!errorStrategy) {
       errorStrategy = ErrorStrategy;
     }
@@ -340,7 +380,10 @@ export default {
 
     const htmlEventValidateHandler = (e) => {
       const modelValue = e.target.value;
-      validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType});
+      if(messageShowType === MessageShowTypeEnum.popover) {
+        EventBus.emit("showPopoverErrorMessage", {showPopover: false, message: "", uid: dfcUID} as ShowPopoverErrorMessageEventData);
+      }
+      validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition});
     }
 
     // 监听事件验证
diff --git a/packages/devui-vue/devui/form/src/form-control/form-control.scss b/packages/devui-vue/devui/form/src/form-control/form-control.scss
index 993bae7c6654f75d29a904b6da6a99ffa5a4eaac..55b3f1bbdea89e121157fcdce5fd9d15d0f4ce90 100644
--- a/packages/devui-vue/devui/form/src/form-control/form-control.scss
+++ b/packages/devui-vue/devui/form/src/form-control/form-control.scss
@@ -60,6 +60,29 @@
     }
   }
 
+
+  .devui-control-content-wrapper {
+    position: relative; 
+    & > div {
+      z-index: 10;
+    }
+    .devui-popover-wrapper {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 9;
+  
+      & > div {
+        width: inherit;
+        height: 100%;
+      }
+    }
+  }
+
+
+
   .has-feedback {
     display: flex;
     align-items: center;
diff --git a/packages/devui-vue/devui/form/src/form-control/form-control.tsx b/packages/devui-vue/devui/form/src/form-control/form-control.tsx
index 181509190d2fbe207180c93e93584449475898a0..a1c0cc9979f8693f308c59bd267bbc85f765aa2e 100644
--- a/packages/devui-vue/devui/form/src/form-control/form-control.tsx
+++ b/packages/devui-vue/devui/form/src/form-control/form-control.tsx
@@ -1,8 +1,14 @@
-import { defineComponent, inject, ref, computed, reactive } from 'vue';
+import { defineComponent, inject, ref, computed, reactive, onMounted } from 'vue';
+import { uniqueId } from 'lodash-es';
 import {IForm, formControlProps, formInjectionKey} from '../form-types';
+import { ShowPopoverErrorMessageEventData } from '../directive/d-validate-rules'
+import { EventBus } from '../util';
 import Icon from '../../../icon/src/icon';
+import Popover from '../../../popover/src/popover';
 import './form-control.scss';
 
+type positionType = 'top' | 'right' | 'bottom' | 'left';
+
 export default defineComponent({
   name: 'DFormControl',
   props: formControlProps,
@@ -11,6 +17,20 @@ export default defineComponent({
     const dForm = reactive(inject(formInjectionKey, {} as IForm));
     const labelData = reactive(dForm.labelData);
     const isHorizontal = labelData.layout === 'horizontal';
+    const uid = uniqueId("dfc-");
+    const showPopover = ref(false);
+    const tipMessage = ref("");
+    const popPosition = ref<positionType>("bottom");
+
+    onMounted(() => {
+      EventBus.on("showPopoverErrorMessage", (data: ShowPopoverErrorMessageEventData) => {
+        if(uid === data.uid) {
+          showPopover.value = data.showPopover;
+          tipMessage.value = data.message;
+          popPosition.value = data.popPosition as any; // todo: 待popover组件positionType完善类型之后再替换类型
+        }
+      });
+    });
 
     const iconData = computed(() => {
       switch(props.feedbackStatus) {
@@ -30,9 +50,14 @@ export default defineComponent({
         feedbackStatus,
         extraInfo,
       } = props;
-      return <div class="form-control" ref={formControl}>
+      return <div class="form-control" ref={formControl} data-uid={uid}>
         <div class={`devui-form-control-container${isHorizontal ? ' devui-form-control-container-horizontal' : ''}${feedbackStatus ? ' has-feedback' : ''}${feedbackStatus === 'error' ? ' feedback-error' : ''}`}>
-          {ctx.slots.default?.()}
+          <div class="devui-control-content-wrapper">
+            {ctx.slots.default?.()}
+            <div class="devui-popover-wrapper">
+              { showPopover.value && <Popover visible={true} content={tipMessage.value} popType={"error"} position={popPosition.value} /> }
+            </div>
+          </div>
           {
             (feedbackStatus || ctx.slots.suffixTemplate?.()) &&
             <span class="feedback-status">
diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md
index 2c784e44c4468d17496859a9c3d978edf20e7213..cd5e4890cbec96b279329d3fc321bd827cec0163 100644
--- a/packages/devui-vue/docs/components/form/index.md
+++ b/packages/devui-vue/docs/components/form/index.md
@@ -841,16 +841,14 @@ export default defineComponent({
 
 #### 验证单个元素，自定义管理消息提示
 
-> doing
->
-> 待引入popover组件
+> done
 
 配置`messageShowType`可选择消息自动提示的方式，默认为`popover`。
 
 - 设置为`popover`错误信息将在元素聚焦时以`popover`形式呈现。
 - 设置为`text`错误信息将自动以文本方式显示在元素下方(需要与表单控件容器配合使用)。 
 - 设置为`none`错误信息将不会自动呈现到视图， 可在模板中获取`message`或通过监听`messageChange`事件获取错误`message`， 或在模板中直接通过引用获取。
-- 配置`popPosition`可在消息提示方式为`popover`时，自定义`popover`内容弹出方向。 默认为`['right', 'bottom']`。
+- 在 `options`中配置  `popPosition`可在消息提示方式为`popover`时，自定义`popover`内容弹出方向， 默认为`['right', 'bottom']`。更多取值参考popover组件。
 
 :::demo
 
@@ -875,7 +873,7 @@ export default defineComponent({
     </d-form-item>
     <d-form-item prop="asyncSum">
       <d-form-label>计算：1 + 2 = ？</d-form-label>
-      <d-form-control extraInfo="messageShowType为popover，使用popover进行提示（todo，待引入popover组件）">
+      <d-form-control extraInfo="messageShowType为popover，使用popover进行提示">
         <d-input v-model:value="formModel.asyncSum" v-d-validate-rules="{
           rules: {
             asyncValidators: [
@@ -883,7 +881,9 @@ export default defineComponent({
             ]
           },
           options: {
-            updateOn: 'input'
+            updateOn: 'input',
+            messageShowType: 'popover',
+            popPosition: 'bottom'
           }
         }" />
       </d-form-control>
@@ -1616,10 +1616,10 @@ export default defineComponent({
 
 #### v-d-validate-rules
 
-| 参数    | 说明               | 类型   | 可选值                      | 默认值 |
-| ------- | ------------------ | ------ | --------------------------- | ------ |
-| rules   | 必选，表单校验规则 | object |                             | --     |
-| options | 可选，配置选项     | object | `errorStrategy`、`updateOn` |        |
+| 参数    | 说明               | 类型   | 可选值                                     | 默认值 |
+| ------- | ------------------ | ------ | ------------------------------------------ | ------ |
+| rules   | 必选，表单校验规则 | object |                                            | --     |
+| options | 可选，配置选项     | object | `errorStrategy`、`updateOn`、`popPosition` |        |
 
 > 该指令仅在`d-form`标签或`d-input`等表单类组件上使用有效。
 
@@ -1639,12 +1639,8 @@ export default defineComponent({
 
 - options支持以下字段
   - errorStrategy，错误更新策略：`dirty`（默认）、`prestine`
-
   - updateOn，校验时机，可选值有：`change`（默认）、 `blur`、 `input`
+  - popPosition，自定义`popover`内容弹出方向。 默认为`['right', 'bottom']`，更多取值参考popover组件。
+
 
 
-<style>
-  ul, ol {
-    list-style: unset !important;
-  }
-</style>