allow overwriting tooltip text

klippa-app · May 30, 2024 · 50643bb · 50643bb
1 parent 4a881e6
commit 50643bb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -68,7 +68,7 @@
  </div>
  </div>
 
- <div class="smallText" klpWithTooltip="black">I am a small bit of text</div>
+ <div class="smallText" klpWithTooltip="black" tooltipText="Tooltip text overwrite">I am a small bit of text</div>
 
  <div>
  <klp-form-element caption="radioButtons classic" spaceDistribution="34-66" verticalAlignment="top">

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.19.2",
+ "version": "14.19.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
@@ -16,12 +16,14 @@ export class WithTooltipDirective {
  private triangle: HTMLElement;
  private triangleWhite: HTMLElement;
  @Input() klpWithTooltip: 'orange'| 'black' = 'orange';
+ @Input() tooltipText: string;
  constructor(el: ElementRef) {
  el.nativeElement.addEventListener('mouseenter', () => {
+ const textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
  if (!stringIsSetAndFilled(this.klpWithTooltip)) {
  return;
  }
- if (el.nativeElement.innerText.trim().length < 1) {
+ if (textToDisplay.length < 1) {
  return;
  }
  if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
@@ -46,7 +48,7 @@ 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 = el.nativeElement.innerText;
+ this.div.textContent = textToDisplay;
  el.nativeElement.prepend(this.div);
 
  this.triangle = document.createElement('div');