From 57baf7efa464273e6079050b4e1b7d7bd3ff5a70 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 21 Feb 2025 09:05:15 +0100
Subject: [PATCH] OZG-7619 Set tooltip width
---
.../src/lib/tooltip/tooltip.component.ts | 6 ++++-
.../src/lib/tooltip/tooltip.directive.spec.ts | 21 ++++++++++++---
.../src/lib/tooltip/tooltip.directive.ts | 26 +++++++++++++++++--
3 files changed, 46 insertions(+), 7 deletions(-)
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
index f82fe2102c..db3812ba6c 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
@@ -29,12 +29,15 @@ import { TooltipPosition } from './tooltip.directive';
selector: 'ods-tooltip',
imports: [NgClass],
template: `<span
- class="tooltip fixed z-[100] max-w-md animate-fadeIn cursor-default break-words rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white md:max-w-[calc(90vw)]"
+ class="tooltip fixed z-[100] animate-fadeIn cursor-default break-words rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white"
[ngClass]="class"
[class.visible]="show"
[class.invisible]="!show"
+ [class.text-wrap]="width"
+ [class.text-nowrap]="!width"
[style.left.px]="left"
[style.top.px]="top"
+ [style.width.px]="width"
[style.--before-left.px]="leftOffset"
[attr.id]="id"
role="tooltip"
@@ -49,6 +52,7 @@ export class TooltipComponent {
text: string = '';
left: number = 0;
top: number = 0;
+ width: number = null;
show: boolean = false;
id: string;
class: string;
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
index e41c410f0e..cbbf2dce28 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
@@ -23,7 +23,7 @@
*/
import { InteractivityChecker } from '@angular/cdk/a11y';
import { ComponentRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { faker } from '@faker-js/faker/.';
import { TooltipComponent } from './tooltip.component';
import { TooltipDirective, TooltipPosition } from './tooltip.directive';
@@ -46,7 +46,17 @@ describe('TooltipDirective', () => {
location: null,
hostView: null,
injector: null,
- instance: { id: '', left: 0, top: 0, text: '', show: false, position: TooltipPosition.BELOW, class: '', leftOffset: 0 },
+ instance: {
+ id: '',
+ left: 0,
+ top: 0,
+ text: '',
+ show: false,
+ position: TooltipPosition.BELOW,
+ class: '',
+ leftOffset: 0,
+ width: null,
+ },
};
const parentRect: DOMRect = { bottom: 0, top: 0, height: 0, left: 0, right: 0, toJSON: jest.fn(), width: 0, x: 0, y: 0 };
@@ -152,6 +162,7 @@ describe('TooltipDirective', () => {
beforeEach(() => {
directive.componentRef = mockComponentRef;
directive.setTooltipProperties = jest.fn();
+ directive.setWidth = jest.fn();
directive.elementRef.nativeElement.contains = jest.fn().mockReturnValue(true);
});
@@ -175,11 +186,13 @@ describe('TooltipDirective', () => {
expect(directive.attachedToFocused).toBeTruthy();
});
- it('should set tooltip properties', () => {
+ it('should set tooltip properties after tick', fakeAsync(() => {
directive.showTooltip();
+ tick();
+
expect(directive.setTooltipProperties).toHaveBeenCalled();
- });
+ }));
});
describe('hideTooltip', () => {
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
index ad238fc30e..8d6302044b 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
@@ -23,7 +23,17 @@
*/
import { isEscapeKey, isNotNull } from '@alfa-client/tech-shared';
import { InteractivityChecker } from '@angular/cdk/a11y';
-import { ComponentRef, Directive, ElementRef, HostListener, inject, Input, OnDestroy, Renderer2, ViewContainerRef, } from '@angular/core';
+import {
+ ComponentRef,
+ Directive,
+ ElementRef,
+ HostListener,
+ inject,
+ Input,
+ OnDestroy,
+ Renderer2,
+ ViewContainerRef,
+} from '@angular/core';
import { isEmpty, isNull, uniqueId } from 'lodash-es';
import { TooltipComponent } from './tooltip.component';
@@ -80,7 +90,10 @@ export class TooltipDirective implements OnDestroy {
const nativeElement: HTMLElement = this.elementRef.nativeElement;
this.attachedToFocused = nativeElement.contains(document.activeElement);
- this.setTooltipProperties();
+ this.setWidth();
+ setTimeout(() => {
+ this.setTooltipProperties();
+ });
}
@HostListener('mouseleave')
@@ -197,6 +210,15 @@ export class TooltipDirective implements OnDestroy {
return parentBottom + (attachedToFocused ? OUTLINE_INDENT : 0);
}
+ setWidth(): void {
+ const currentWidth: number = this.componentRef.location.nativeElement.children[0].getBoundingClientRect().width;
+ if (currentWidth >= 360) {
+ this.componentRef.instance.width = 360;
+ } else {
+ this.componentRef.instance.width = null;
+ }
+ }
+
hide(): void {
if (isNull(this.componentRef)) {
return;
--
GitLab