OZG-7619 tooltip with absolute(experimental)

alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts

@@ -29,7 +29,7 @@ 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 absolute z-[100] w-max max-w-[calc(50vw)] 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"
@@ -41,7 +41,7 @@ import { TooltipPosition } from './tooltip.directive';
   >
     {{ text }}
   </span>`,
-  styles: [':host {@apply contents}'],
+  styles: [':host {@apply relative}'],
   styleUrl: './tooltip.component.scss',
   standalone: true,
 })

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';
 
@@ -104,8 +114,8 @@ export class TooltipDirective implements OnDestroy {
     const nativeElement: HTMLElement = this.elementRef.nativeElement;
     this.componentRef = this.viewContainerRef.createComponent(TooltipComponent);
     this.parentElement = this.getParentElement(nativeElement);
-    this.parentElement.appendChild(this.componentRef.location.nativeElement);
-    this.tooltipId = uniqueId('tooltip');
+    this.parentElement.prepend(this.componentRef.location.nativeElement);
+    this.tooltipId = uniqueId('tooltip-');
     this.setInitialTooltipProperties(tooltipText, this.tooltipId);
     this.setAriaAttribute(this.tooltipAriaType);
   }
@@ -116,11 +126,11 @@ export class TooltipDirective implements OnDestroy {
   }
 
   setTooltipProperties(): void {
-    const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
+    const { width, height } = this.parentElement.getBoundingClientRect();
     this.setTooltipOffsetAndPosition();
 
-    this.componentRef.instance.left = (right + left) / 2 + this.leftOffset;
-    this.componentRef.instance.top = this.getTopPosition(top, bottom, this.position, this.attachedToFocused);
+    this.componentRef.instance.left = this.leftOffset + width / 2;
+    this.componentRef.instance.top = this.getTopPosition(height, this.position, this.attachedToFocused);
     this.componentRef.instance.position = this.position;
     this.componentRef.instance.leftOffset = this.leftOffset;
     this.componentRef.instance.show = true;
@@ -166,7 +176,7 @@ export class TooltipDirective implements OnDestroy {
 
   setTooltipOffsetAndPosition(): void {
     const { width, height } = this.componentRef.location.nativeElement.children[0].getBoundingClientRect();
-    const parentRect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();
+    const parentRect: DOMRect = this.parentElement.getBoundingClientRect();
     this.setLeftOffset(width, parentRect, window.innerWidth);
     this.setAutoPosition(height, parentRect, window.innerHeight);
   }
@@ -190,11 +200,11 @@ export class TooltipDirective implements OnDestroy {
     return element.querySelector('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
   }
 
-  getTopPosition(parentTop: number, parentBottom: number, tooltipPosition: TooltipPosition, attachedToFocused: boolean): number {
+  getTopPosition(parentHeight: number, tooltipPosition: TooltipPosition, attachedToFocused: boolean): number {
     if (tooltipPosition === TooltipPosition.ABOVE) {
-      return parentTop - (attachedToFocused ? OUTLINE_INDENT : 0);
+      return attachedToFocused ? -OUTLINE_INDENT : 0;
     }
-    return parentBottom + (attachedToFocused ? OUTLINE_INDENT : 0);
+    return parentHeight + (attachedToFocused ? OUTLINE_INDENT : 0);
   }
 
   hide(): void {