support tooltips with a template

klippa-app · Jul 19, 2024 · 725f219 · 725f219
1 parent 6164a12
commit 725f219
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -72,6 +72,14 @@
  I am a small piece of text
  </klp-form-button>
 
+ <klp-form-button klpWithTooltip="black" [tooltipTemplate]="tooltipTpl">
+ Tooltip with template
+ <ng-template #tooltipTpl>
+ <div style="color: white; backgroundColor: #123456;">kers</div>
+ </ng-template>
+ </klp-form-button>
+
+
  <div>
  <klp-form-element caption="radioButtons classic" spaceDistribution="34-66" verticalAlignment="top">
  <klp-form-radio formControlName="radioOption" [options]="radioOptionsClassic" orientation="column">
@@ -208,3 +216,4 @@
 
  <klp-form-submit-button [submitCallback]="saveSimple">Save</klp-form-submit-button>
 </klp-form>
+
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.21.0",
+ "version": "14.22.0",
  "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
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Input} from "@angular/core";
+import {Directive, ElementRef, Input, OnChanges, SimpleChanges, TemplateRef} from "@angular/core";
 import {stringIsSetAndFilled} from "./util/values";
 
 const triangleSize = '12px';
@@ -12,25 +12,32 @@ const colors = {
 @Directive({
  selector: '[klpWithTooltip]'
 })
-export class WithTooltipDirective {
+export class WithTooltipDirective implements OnChanges{
  private div: HTMLElement;
  private triangle: HTMLElement;
  private triangleWhite: HTMLElement;
  @Input() klpWithTooltip: 'orange'| 'black' = 'orange';
  @Input() tooltipText: string;
- constructor(el: ElementRef) {
+ @Input() tooltipTemplate: TemplateRef<any>;
+ private templateInstance: HTMLElement;
+ constructor(private el: ElementRef) {
  el.nativeElement.addEventListener('mouseenter', () => {
- const textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
+ let textToDisplay: string;
+ if (!this.templateInstance) {
+ textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
+ }
  if (!stringIsSetAndFilled(this.klpWithTooltip)) {
  return;
  }
- if (textToDisplay.length < 1) {
+ if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
  return;
  }
  if (stringIsSetAndFilled(this.tooltipText)) {
  if (this.tooltipText === el.nativeElement.innerText) {
  return;
  }
+ } else if (this.tooltipTemplate) {
+ // no need to check here, just render the template
  } else {
  if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
  return;
@@ -55,7 +62,17 @@ export class WithTooltipDirective {
  this.div.style.padding = '0.3rem 0.5rem';
  this.div.style.boxSizing = 'border-box';
  this.div.style.borderRadius = '3px';
- this.div.textContent = textToDisplay;
+ if (stringIsSetAndFilled(textToDisplay)) {
+ this.div.textContent = textToDisplay;
+ } else if (this.templateInstance) {
+ this.div.style.visibility = 'hidden';
+ this.div.appendChild(this.templateInstance);
+ setTimeout(() => {
+ const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
+ this.div.style.backgroundColor = color;
+ this.div.style.visibility = 'visible';
+ });
+ }
  el.nativeElement.prepend(this.div);
 
  this.triangle = document.createElement('div');
@@ -81,7 +98,18 @@ export class WithTooltipDirective {
  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`;
+
+ if (stringIsSetAndFilled(textToDisplay)) {
+ this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+ } else if (this.templateInstance) {
+ this.div.style.visibility = 'hidden';
+ setTimeout(() => {
+ const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
+ this.triangleWhite.style.borderTop = `${triangleSize} solid ${color}`;
+ this.div.style.visibility = 'visible';
+ });
+ }
+
  el.nativeElement.prepend(this.triangleWhite);
  });
 
@@ -97,4 +125,11 @@ export class WithTooltipDirective {
  } catch (ex) {}
  });
  }
+
+ public ngOnChanges(simpleChanges: SimpleChanges): void {
+ if (simpleChanges.tooltipTemplate?.currentValue) {
+ const viewRef = this.tooltipTemplate.createEmbeddedView(null);
+ this.templateInstance = viewRef.rootNodes[0];
+ }
+ }
 }