diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss
index e33c0304ea650078d5e416f4713da68bda9861bc..f4ed98683c0e388952064a2b4bcac7028e4d50ec 100644
--- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss
+++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss
@@ -4,7 +4,8 @@ $form-item-container: (
   'require-mark-color': getCssVar(color, danger),
   'label-left-padding': 0 getCssVar(spacing, base-tight) 0 0,
   'label-right-padding': 0 0 0 getCssVar(spacing, base-tight),
-  'padding': getCssVar(spacing, tight) getCssVar(spacing, extra-tight) getCssVar(spacing, tight) getCssVar(spacing, extra-tight),
+  'padding': getCssVar(spacing, tight) getCssVar(spacing, extra-tight)
+    getCssVar(spacing, tight) getCssVar(spacing, extra-tight),
   'font-size': getCssVar(font-size, regular),
   'label-color': getCssVar(color, text, 1),
   'error-font-size': getCssVar(font-size, small),
@@ -25,34 +26,49 @@ $form-item-container: (
     font-size: getCssVar('form-item-container', 'font-size');
     color: getCssVar('form-item-container', 'label-color');
 
-    @include m(tooltip) {
-      max-width: 150px;
+    @include m(content) {
+      display: flex;
+      align-items: center;
+      @include when(tooltip) {
+        cursor: pointer;
+      }
+    }
+
+    @include m('icon') {
+      padding-right: getCssVar(spacing, extra-tight);
+    }
+  }
+
+  @include e(popper) {
+    &.el-popper {
+      border-radius: 0;
+      padding: getCssVar(spacing, extra-tight);
+      border: 1px solid getCssVar(color, border);
+      box-shadow: getCssVar(shadow, elevated);
 
-      &:has(ion-icon) {
-        padding-right: getCssVar(width, icon-large);
+      table {
+        border-spacing: 0;
+        border-collapse: collapse;
       }
 
-      a {
-        padding: 0 getCssVar(spacing, extra-tight);
-        color: getCssVar(color, link);
+      table tr td,
+      table tr th {
+        border: 1px solid getCssVar(color, border);
+        padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight);
       }
 
-      ion-icon {
-        position: absolute;
-        font-size: getCssVar(width, icon-large);
-        color: getCssVar(color, fill-2);
+      .el-popper__arrow {
+        display: block;
       }
     }
-    @include m('icon'){
-      padding-right: getCssVar(spacing,tight);
-    }
-  }
 
-  @include e(popper) {
-    &.el-popper.is-light {
-      padding: 0 getCssVar(spacing, extra-tight);
-      border: 1px solid  getCssVar(color, text-0);
-      border-radius: 0;
+    @include m(content) {
+      max-width: 500px;
+
+      a {
+        padding: 0 getCssVar(spacing, extra-tight);
+        color: getCssVar(color, link);
+      }
     }
   }
 
@@ -74,15 +90,15 @@ $form-item-container: (
     @include flex(column);
   }
 
-  @include m(top){
+  @include m(top) {
     @include e(label) {
-      margin-bottom: getCssVar('spacing','extra-tight');
+      margin-bottom: getCssVar('spacing', 'extra-tight');
     }
   }
 
-  @include m(bottom){
+  @include m(bottom) {
     @include e(label) {
-      margin-top: getCssVar('spacing','extra-tight');
+      margin-top: getCssVar('spacing', 'extra-tight');
     }
   }
 
@@ -90,7 +106,9 @@ $form-item-container: (
     @include e(label) {
       padding: getCssVar('form-item-container', 'label-left-padding');
       line-height: getCssVar('form-item-container', 'line-height');
-      text-align: right;
+      @include m(content) {
+        float: right;
+      }
     }
   }
 
@@ -98,21 +116,25 @@ $form-item-container: (
     @include e(label) {
       padding: getCssVar('form-item-container', 'label-right-padding');
       line-height: getCssVar('form-item-container', 'line-height');
-      text-align: left;
+      @include m(content) {
+        float: left;
+      }
     }
   }
 
   // 必填*的样式
   @include when(required) {
     @include e(label) {
-      &::before {
-        display: inline-block;
-        margin-right: 4px;
-        /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-        font-family: SimSun;
-        line-height: 1;
-        color: getCssVar('form-item-container', 'require-mark-color');
-        content: '*';
+      @include m(content) {
+        &::before {
+          display: inline-block;
+          margin-right: 4px;
+          /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+          font-family: SimSun;
+          line-height: 1;
+          color: getCssVar('form-item-container', 'require-mark-color');
+          content: '*';
+        }
       }
     }
   }
@@ -143,18 +165,20 @@ $form-item-container: (
     top: 100%;
     width: 100%;
     font-size: getCssVar('form-item-container', 'error-font-size');
-    line-height: calc(getCssVar('form-item-container', 'error-font-size') + 2px);
+    line-height: calc(
+      getCssVar('form-item-container', 'error-font-size') + 2px
+    );
     color: getCssVar('form-item-container', 'error-color');
     word-wrap: break-word;
   }
 
   // 错误的样式
-  @include when(error){
+  @include when(error) {
     .#{bem(form-item-container, editor)} {
-      .el-input__wrapper{
-        box-shadow: 0 0 0 1px getCssVar('form-item-container', 'error-color') inset;
+      .el-input__wrapper {
+        box-shadow: 0 0 0 1px getCssVar('form-item-container', 'error-color')
+          inset;
       }
     }
-
   }
 }
diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx
index 3f05bdc8f19ff6338e14083feb18c20fedfc52f0..14e0501aac88ffb0e9db8f71fb90a9b713c216b7 100644
--- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx
+++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx
@@ -1,7 +1,8 @@
 import { IBizIcon, useNamespace } from '@ibiz-template/vue3-util';
-import { computed, defineComponent, ref } from 'vue';
-import './form-item-container.scss';
+import { PropType, defineComponent } from 'vue';
+import { IDEFormItem } from '@ibiz/model-core';
 import { showTitle } from '@ibiz-template/core';
+import './form-item-container.scss';
 
 export const IBizFormItemContainer = defineComponent({
   name: 'IBizFormItemContainer',
@@ -19,107 +20,81 @@ export const IBizFormItemContainer = defineComponent({
     labelClass: {
       type: Array<string>,
     },
-    labelPos: {
-      type: String,
+    modelData: {
+      type: Object as PropType<IDEFormItem>,
       required: true,
     },
-    labelWidth: {
-      type: Number,
-      default: 130,
-    },
-    enableInputTip: {
-      type: Boolean,
-    },
-    inputTip: {
-      type: String,
-    },
-    inputTipUrl: {
-      type: String,
-    },
-    inputTipClosable: {
-      type: Boolean,
-    },
-    labelSysImg: {
-      type: Object,
-    },
   },
   setup(props) {
     const ns = useNamespace('form-item-container');
+    const { sysImage, inputTip, inputTipUrl, enableInputTip } = props.modelData;
 
-    const tooltip = ref();
-
-    const cssVars = computed(() => {
-      if (props.labelWidth !== 130) {
-        return ns.cssVarBlock({ 'label-width': `${props.labelWidth}px` });
-      }
-      return {};
-    });
+    const renderLabelContent = () => {
+      return (
+        <div
+          class={[ns.em('label', 'content'), ns.is('tooltip', enableInputTip)]}
+        >
+          {enableInputTip && (
+            <ion-icon
+              name='bulb-outline'
+              class={ns.em('label', 'icon')}
+            ></ion-icon>
+          )}
+          {sysImage && (
+            <IBizIcon class={ns.em('label', 'icon')} icon={sysImage}></IBizIcon>
+          )}
+          {props.label}
+        </div>
+      );
+    };
 
-    const hiddenTooltip = () => {
-      if (tooltip.value) {
-        tooltip.value.hide();
-      }
+    const renderInputTip = () => {
+      return (
+        <el-tooltip
+          effect='light'
+          popper-class={ns.e('popper')}
+          placement={props.modelData.labelPos === 'RIGHT' ? 'right' : 'left'}
+        >
+          {{
+            default: () => {
+              return renderLabelContent();
+            },
+            content: () => {
+              return (
+                <div class={ns.em('popper', 'content')}>
+                  <div
+                    class={ns.em('popper', 'tooltip')}
+                    v-html={inputTip || props.label}
+                  ></div>
+                  {inputTipUrl && (
+                    <a
+                      target='_blank'
+                      href={inputTipUrl}
+                      title={ibiz.i18n.t('component.formItemContainer.more')}
+                    >
+                      {ibiz.i18n.t('component.formItemContainer.more')}
+                    </a>
+                  )}
+                </div>
+              );
+            },
+          }}
+        </el-tooltip>
+      );
     };
 
     const renderLabel = () => {
-      const classList = [ns.e('label'), ...(props.labelClass || [])];
-      if (props.enableInputTip) {
-        return (
-          <el-tooltip
-            effect='light'
-            offset={4}
-            popper-class={ns.e('popper')}
-            ref='tooltip'
-          >
-            {{
-              default: () => {
-                return (
-                  <div class={classList}>
-                    {props.labelSysImg && (
-                      <IBizIcon
-                        class={ns.em('label', 'icon')}
-                        icon={props.labelSysImg}
-                      ></IBizIcon>
-                    )}
-                    {props.label}
-                  </div>
-                );
-              },
-              content: () => {
-                return (
-                  <div class={ns.em('label', 'tooltip')}>
-                    {props.inputTip || props.label}
-                    {props.inputTipUrl && (
-                      <a href={props.inputTipUrl} target='_blank'>
-                        {ibiz.i18n.t('component.formItemContainer.more')}
-                      </a>
-                    )}
-                    {props.inputTipClosable && (
-                      <ion-icon
-                        name='close-circle'
-                        onClick={hiddenTooltip}
-                      ></ion-icon>
-                    )}
-                  </div>
-                );
-              },
-            }}
-          </el-tooltip>
-        );
-      }
       return (
-        <div class={classList} title={showTitle(props.label)}>
-          {props.labelSysImg && (
-            <IBizIcon
-              class={ns.em('label', 'icon')}
-              icon={props.labelSysImg}
-            ></IBizIcon>
-          )}
-          {props.label}
+        <div
+          title={enableInputTip ? undefined : showTitle(props.label)}
+          class={[ns.e('label'), ...(props.labelClass || [])]}
+        >
+          {enableInputTip ? renderInputTip() : renderLabelContent()}
         </div>
       );
     };
-    return { ns, cssVars, tooltip, renderLabel };
+
+    return { ns, renderLabel };
   },
   render() {
     // 内容区，包含编辑器和错误消息
@@ -127,7 +102,10 @@ export const IBizFormItemContainer = defineComponent({
       <div
         class={[
           this.ns.e('content'),
-          this.ns.em('content', `label-${this.labelPos.toLowerCase()}`),
+          this.ns.em(
+            'content',
+            `label-${this.modelData.labelPos?.toLowerCase()}`,
+          ),
         ]}
       >
         <div class={[this.ns.e('editor')]}>{this.$slots.default?.()}</div>
@@ -143,19 +121,21 @@ export const IBizFormItemContainer = defineComponent({
       <div
         class={[
           this.ns.b(),
-          this.ns.m(this.labelPos.toLowerCase()),
+          this.ns.m(this.modelData.labelPos?.toLowerCase()),
           this.ns.is('required', this.required),
           this.ns.is('error', !!this.error),
         ]}
-        style={this.cssVars}
+        style={this.ns.cssVarBlock({
+          'label-width': `${this.modelData.labelWidth || 130}px`,
+        })}
       >
-        {this.labelPos === 'LEFT' || this.labelPos === 'TOP'
-          ? this.renderLabel()
-          : null}
+        {this.modelData.labelPos &&
+          ['LEFT', 'TOP'].includes(this.modelData.labelPos) &&
+          this.renderLabel()}
         {content}
-        {this.labelPos === 'RIGHT' || this.labelPos === 'BOTTOM'
-          ? this.renderLabel()
-          : null}
+        {this.modelData.labelPos &&
+          ['RIGHT', 'BOTTOM'].includes(this.modelData.labelPos) &&
+          this.renderLabel()}
       </div>
     );
   },
diff --git a/src/control/form/form-detail/form-item/form-item.tsx b/src/control/form/form-detail/form-item/form-item.tsx
index 833d3ffe153277ab98a2e0f7ce5ce6df17cedff3..f5daae51f31e1721ad14dd3881c826ab0701e619 100644
--- a/src/control/form/form-detail/form-item/form-item.tsx
+++ b/src/control/form/form-detail/form-item/form-item.tsx
@@ -1,9 +1,9 @@
 import { defineComponent, h, PropType, ref, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import './form-item.scss';
 import { IDEFormItem } from '@ibiz/model-core';
 import { FormItemController } from '@ibiz-template/runtime';
 import CompositeFormItem from './composite-form-item/composite-form-item';
+import './form-item.scss';
 
 export const FormItem = defineComponent({
   name: 'IBizFormItem',
@@ -59,22 +59,17 @@ export const FormItem = defineComponent({
     return { ns, c, extraParams, onValueChange };
   },
   render() {
-    if (
-      !this.c.state.visible ||
-      this.controller.model.editor?.editorType === 'HIDDEN'
-    ) {
+    if (!this.c.state.visible || this.c.model.editor?.editorType === 'HIDDEN') {
       return null;
     }
     // 编辑器内容
     let editor = null;
-    const compositeItem = this.controller.model.compositeItem;
+    const compositeItem = this.c.model.compositeItem;
     // 复合表单项
     if (compositeItem) {
-      const { editorItems = [] } = this.controller.model.editor || {};
+      const { editorItems = [] } = this.c.model.editor || {};
       editor = editorItems.map((item: IData) => {
-        const controller = this.controller.form.details[
-          item.id
-        ] as FormItemController;
+        const controller = this.c.form.details[item.id] as FormItemController;
         return (
           <CompositeFormItem
             modelData={controller.model}
@@ -84,33 +79,31 @@ export const FormItem = defineComponent({
         );
       });
     } else {
-      const editMode = this.controller.editor?.model?.editorParams?.editMode;
+      const editMode = this.c.editor?.model?.editorParams?.editMode;
       const editorProps = {
-        style: this.controller.editor?.style,
-        value: this.controller.value,
-        data: this.controller.data,
-        controller: this.controller.editor,
-        disabled: this.controller.state.disabled,
-        readonly: this.controller.state.readonly,
+        style: this.c.editor?.style,
+        value: this.c.value,
+        data: this.c.data,
+        controller: this.c.editor,
+        disabled: this.c.state.disabled,
+        readonly: this.c.state.readonly,
         onChange: this.onValueChange,
         extraParams: this.extraParams,
         controlParams: editMode
-          ? { ...this.controller.form.controlParams, editmode: editMode }
-          : this.controller.form.controlParams,
+          ? { ...this.c.form.controlParams, editmode: editMode }
+          : this.c.form.controlParams,
         onFocus: (event: MouseEvent) => this.c.onFocus(event),
         onBlur: (event: MouseEvent) => this.c.onBlur(event),
-        onEnter: (event: MouseEvent) => this.controller.onEnter(event),
+        onEnter: (event: MouseEvent) => this.c.onEnter(event),
         onClick: (event: MouseEvent, params: IParams) =>
-          this.controller.onClick(event, params),
+          this.c.onClick(event, params),
         ...this.attrs,
       };
       if (this.c.form.state.isLoaded) {
         if (this.$slots.default) {
           editor = this.$slots.default(editorProps);
-        } else if (this.controller.editorProvider) {
-          const component = resolveComponent(
-            this.controller.editorProvider.formEditor,
-          );
+        } else if (this.c.editorProvider) {
+          const component = resolveComponent(this.c.editorProvider.formEditor);
           editor = h(component, {
             ...editorProps,
           });
@@ -118,7 +111,7 @@ export const FormItem = defineComponent({
           editor = (
             <not-supported-editor
               modelData={this.modelData.editor}
-              context={this.controller.context}
+              context={this.c.context}
             />
           );
         }
@@ -127,25 +120,19 @@ export const FormItem = defineComponent({
 
     return (
       <iBizFormItemContainer
-        id={`${this.controller.form.view.model.codeName}_${this.controller.form.model.codeName}_${this.modelData.codeName}`}
+        id={`${this.c.form.view.model.codeName}_${this.c.form.model.codeName}_${this.modelData.codeName}`}
         class={[
           this.ns.b(),
           this.ns.m(this.modelData.id),
           this.ns.is('compositeItem', compositeItem),
-          ...this.controller.containerClass,
+          ...this.c.containerClass,
         ]}
         style={this.modelData.cssStyle}
+        modelData={this.modelData}
         required={this.c.state.required}
         error={this.c.state.error}
         label={this.c.labelCaption}
-        labelSysImg={this.modelData.sysImage}
-        labelClass={this.controller.labelClass}
-        label-pos={this.c.model.labelPos}
-        label-width={this.c.model.labelWidth}
-        enableInputTip={this.modelData.enableInputTip}
-        inputTip={this.modelData.inputTip}
-        inputTipUrl={this.modelData.inputTipUrl}
-        inputTipClosable={this.modelData.inputTipClosable}
+        labelClass={this.c.labelClass}
         onClick={(event: MouseEvent) => this.c.onClick(event)}
       >
         {editor}