support maxWidth for tooltip

klippa-app · Sep 20, 2024 · 097efe4 · 097efe4
1 parent 861b606
commit 097efe4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "18.23.2",
+  "version": "18.23.3",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/withTooltip.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/withTooltip.component.ts
@@ -27,6 +27,7 @@ export class WithTooltipDirective {
 	@Input() klpWithTooltip: 'orange'| 'black' | 'whiteOnBlack' = 'orange';
 	@Input() tooltipText: string;
 	@Input() tooltipTemplate: TemplateRef<any>;
+	@Input() tooltipMaxWidth = 200;
 	@Input() position: 'top' | 'bottom' = 'top';
 	private templateInstance: HTMLElement;
 	private viewRefForTemplate: EmbeddedViewRef<any>;
@@ -74,7 +75,7 @@ export class WithTooltipDirective {
 					this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
 					this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
 				}
-				this.div.style.maxWidth = '200px';
+				this.div.style.maxWidth = `${this.tooltipMaxWidth}px`;
 				this.div.style.whiteSpace = 'break-spaces';
 				this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
 				this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;