improve styling of tooltip errors

klippa-app · Oct 12, 2023 · 9923dbc · 9923dbc
1 parent 0579de8
commit 9923dbc
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 10 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": "14.9.1",
+  "version": "14.9.2",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html
@@ -43,6 +43,7 @@
 	}">
 		<ng-container *ngIf="errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()">
 			<div class="errorTooltipTriangle"></div>
+			<div class="errorTooltipTriangleWhite"></div>
 			<div class="errorTooltip">
 				<ng-container [ngTemplateOutlet]="errorRef"></ng-container>
 			</div>

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss
@@ -76,6 +76,7 @@
 		}
 	}
 }
+$triangleSize: 12px;
 .inputContainer {
 	position: relative;
 	flex: 1;
@@ -87,9 +88,21 @@
 		transform: translate(-50%, calc(-100% + 0.1rem));
 		width: 0px;
 		height: 0px;
-		border-left: 0.8rem solid transparent;
-		border-right: 0.8rem solid transparent;
-		border-top: 0.8rem solid rgba(255, 128, 0, 0.125);
+		border-left: $triangleSize solid transparent;
+		border-right: $triangleSize solid transparent;
+		border-top: $triangleSize solid rgba(255, 128, 0, 0.125);
+	}
+	.errorTooltipTriangleWhite {
+		z-index: 3;
+		position: absolute;
+		display: none;
+		right: 0px;
+		transform: translate(-50%, calc(-100% + 0.1rem - 2px));
+		width: 0px;
+		height: 0px;
+		border-left: $triangleSize solid transparent;
+		border-right: $triangleSize solid transparent;
+		border-top: $triangleSize solid white;
 	}
 	.errorTooltip {
 		position: absolute;
@@ -113,7 +126,7 @@
 		}
 	}
 	&:hover {
-		.errorTooltip, .errorTooltipTriangle {
+		.errorTooltip, .errorTooltipTriangle, .errorTooltipTriangleWhite {
 			display: block;
 		}
 	}

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/withTooltip.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/withTooltip.component.ts
@@ -1,11 +1,14 @@
 import {Directive, ElementRef, Input} from "@angular/core";
 
+const triangleSize = '12px';
+
 @Directive({
 	selector: '[klpWithTooltip]'
 })
 export class WithTooltipDirective {
 	private div: HTMLElement;
 	private triangle: HTMLElement;
+	private triangleWhite: HTMLElement;
 	@Input() klpWithTooltip = true;
 	constructor(el: ElementRef) {
 		el.nativeElement.addEventListener('mouseenter', () => {
@@ -18,7 +21,7 @@ export class WithTooltipDirective {
 
 			this.div = document.createElement('div');
 			this.div.style.zIndex = '2';
-			this.div.style.color = '#515365';
+			this.div.style.color = '#ff8000';
 			this.div.style.position = 'fixed';
 			this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
 			this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
@@ -37,15 +40,28 @@ export class WithTooltipDirective {
 			this.triangle = document.createElement('div');
 			this.triangle.style.zIndex = '1';
 			this.triangle.style.position = 'fixed';
-			this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 3rem)`;
+			this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
 			this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
 			this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
 			this.triangle.style.width = '0';
 			this.triangle.style.height = '0';
-			this.triangle.style.borderLeft = '0.8rem solid transparent';
-			this.triangle.style.borderRight = '0.8rem solid transparent';
-			this.triangle.style.borderTop = '0.8rem solid rgba(255, 128, 0, 0.1254901961)';
+			this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
+			this.triangle.style.borderRight = `${triangleSize} solid transparent`;
+			this.triangle.style.borderTop = `${triangleSize} solid rgba(255, 128, 0, 0.1254901961)`;
 			el.nativeElement.prepend(this.triangle);
+
+			this.triangleWhite = document.createElement('div');
+			this.triangleWhite.style.zIndex = '3';
+			this.triangleWhite.style.position = 'fixed';
+			this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
+			this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+			this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
+			this.triangleWhite.style.width = '0';
+			this.triangleWhite.style.height = '0';
+			this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
+			this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
+			this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+			el.nativeElement.prepend(this.triangleWhite);
 		});
 		el.nativeElement.addEventListener('mouseout', () => {
 			try {
@@ -54,6 +70,9 @@ export class WithTooltipDirective {
 			try {
 				el.nativeElement.removeChild(this.triangle);
 			} catch (ex) {}
+			try {
+				el.nativeElement.removeChild(this.triangleWhite);
+			} catch (ex) {}
 		});
 	}
 }