diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
index 4f77dd0cf7..46dcd5bede 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -179,4 +179,7 @@
}
{{ asterisk }}
+ @if (prop.tooltip) {
+
+ }
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 37f05a892e..1805d87233 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -49,6 +49,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
import { CommonModule } from '@angular/common';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'abp-extensible-form-prop',
@@ -61,6 +62,7 @@ import { CommonModule } from '@angular/common';
ReactiveFormsModule,
DisabledDirective,
NgxValidateCoreModule,
+ NgbTooltip,
NgbTypeaheadModule,
CreateInjectorPipe,
ShowPasswordDirective,
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
index 0ba4b22d45..5b28627085 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -31,9 +31,10 @@
>
@if (prop.tooltip) {
-
- {{ column.name }}
-
+
+ {{ column.name }}
+
}@else{
{{ column.name }}
}
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts
index e86e3ae34e..7692457cd8 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts
@@ -12,6 +12,7 @@ import {
Props,
PropsFactory,
} from './props';
+import { FormPropTooltip } from './form-props';
export class EntityPropList extends PropList> {}
@@ -30,7 +31,7 @@ export class EntityProp extends Prop {
readonly action?: ActionCallback;
readonly component?: Type;
readonly enumList?: Array>;
- readonly tooltip?: string;
+ readonly tooltip?: FormPropTooltip;
readonly columnVisible: ColumnPredicate;
constructor(options: EntityPropOptions) {
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts
index 3ad64e8a13..25ea4ab1bc 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts
@@ -27,6 +27,11 @@ export interface FormPropGroup {
className?: string;
}
+export interface FormPropTooltip {
+ text: string;
+ placement?: 'top' | 'end' | 'bottom' | 'start';
+}
+
export class GroupedFormPropList {
public readonly items: GroupedFormPropItem[] = [];
addItem(item: FormProp) {
@@ -72,6 +77,7 @@ export class FormProp extends Prop {
readonly group?: FormPropGroup | undefined;
readonly displayTextResolver?: PropDisplayTextResolver;
readonly formText?: string;
+ readonly tooltip?: FormPropTooltip;
constructor(options: FormPropOptions) {
super(
@@ -84,10 +90,12 @@ export class FormProp extends Prop {
options.template,
options.className,
options.formText,
+ options.tooltip,
);
this.group = options.group;
this.className = options.className;
this.formText = options.formText;
+ this.tooltip = options.tooltip;
this.asyncValidators = options.asyncValidators || (_ => []);
this.validators = options.validators || (_ => []);
this.disabled = options.disabled || (_ => false);
@@ -135,6 +143,7 @@ export type FormPropOptions = O.Optional<
| 'id'
| 'displayTextResolver'
| 'formText'
+ | 'tooltip'
>;
export type CreateFormPropDefaults = Record[]>;
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
index 799702bc70..2c88bd9939 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
@@ -2,6 +2,7 @@ import { LinkedList } from '@abp/utils';
import { InjectFlags, InjectionToken, InjectOptions, Type } from '@angular/core';
import { O } from 'ts-toolbelt';
import { ePropType } from '../enums/props.enum';
+import { FormPropTooltip } from './form-props';
export abstract class PropList> extends LinkedList {}
@@ -36,6 +37,7 @@ export abstract class Prop {
public readonly template?: Type,
public readonly className?: string,
public readonly formText?: string,
+ public readonly tooltip?: FormPropTooltip,
public readonly displayTextResolver?: PropDisplayTextResolver,
) {
this.displayName = this.displayName || this.name;