Improve position and dimension of tooltips

#617

docs/release-notes-editor.md

@@ -2,20 +2,19 @@ Editor
 ======
 ## 2.4.0
 ### Neue Funktionen
-- Rechenkästchen: Tastatur und Eingabehilfe (Ziffern / Ziffern & Basis-Operatoren) können hinzugefügt werden. 
-- Ablegeliste: ID der Optionen wird im Eigenschaftenbereich angezeigt 
-- Ablegeliste: Knopf zum Verbinden aller verfügbaren Ablegelisten
-- Rechenkästchen: Eingabehilfe und Tastatur können eingestellt werden
+- Rechenkästchen: Tastatur und Eingabehilfe (Ziffern / Ziffern & Basis-Operatoren) können hinzugefügt werden
+- Ablegeliste:
+  -  ID der Optionen wird im Eigenschaftenbereich angezeigt
+  -  Knopf zum Verbinden aller verfügbaren Ablegelisten
 - Neues Element: Auslöser
-  - Element ist nur im Editor sichtbar 
+  - Element ist nur im Editor sichtbar
   - Eingestellte Aktion wird bei der Ankunft des unsichtbaren Elements im Bildbereich des Browsers ausgelöst
 
-## Fehlerbehebungen
-- Legt für Kinderelemente von Optionstabellen unf Lückentexten beim Einfügen von kopierten 
-  Abschnitten neue IDs an
+### Fehlerbehebungen
+- Legt für Kinderelemente von Optionstabellen und Lückentexten beim Einfügen von kopierten Abschnitten neue IDs an. verhindert damit den Fehler "Doppelte Ids"
 
-## Änderungen
-- Überarbeitung des Optionsdialogs für Ablegelisten 
+### Änderungen
+- Überarbeitung des Optionsdialogs für Ablegelisten
 
 
 ## 2.3.0

docs/release-notes-player.md

@@ -11,11 +11,13 @@ Player
 - Beim Fokus-Wechsel zwischen Elementen mit Eingabehilfe oder Tastatur wird deren Animation unterbunden
 - Zentriert den eingeblendeten Seiten-Scroll-Button in Bezug zur eingestellten Seitengröße
 - Audios/Videos informieren nun unmittelbar nach dem Starten über ihre Statusänderung
+- Überarbeitung der Postion und Dimension von Tooltips 
 
 ### Fehlerbehebungen
 - Korrigiert die Anzeige der Anzahl der Durchläufe von Audios und Videos
 - Stellt die bereits abgelaufene Zeit beim Einlenden von Abschnitten beim erneuten Aufruf einer Aufgabe wieder her
 
+
 ## 2.3.0
 ### Neue Funktionen
 - Unterstützt neue Funktionen für Geometrie und Rechenkästchen aus Editor 2.3.0

projects/common/components/tooltip/base-tooltip.directive.ts

@@ -32,15 +32,16 @@ export abstract class BaseTooltipDirective implements OnDestroy {
 
   private createComponent(): void {
     this.componentRef = this.viewContainerRef.createComponent(TooltipComponent);
-    const domElem =
+    document.body.appendChild(
       (this.componentRef.hostView as EmbeddedViewRef<TooltipComponent>)
-        .rootNodes[0] as HTMLElement;
-    document.body.appendChild(domElem);
+        .rootNodes[0] as HTMLElement
+    );
   }
 
   private setTooltipComponentProperties(): void {
     this.setTooltipText();
-    this.setTooltipPosition();
+    // wait for rendering to get first tooltip dimensions
+    setTimeout(() => this.setTooltipPosition(this.tooltipPosition));
   }
 
   private setTooltipText(): void {
@@ -49,37 +50,97 @@ export abstract class BaseTooltipDirective implements OnDestroy {
     }
   }
 
-  private setTooltipPosition(): void {
+  private setTooltipPosition(tooltipPosition: TooltipPosition): void {
+    /* eslint-disable  @typescript-eslint/no-non-null-assertion */
     if (this.componentRef) {
-      this.componentRef.instance.tooltipPosition = this.tooltipPosition;
+      this.componentRef.instance.tooltipPosition = tooltipPosition;
       const {
         left, right, top, bottom
       } = this.tooltipElement.getBoundingClientRect();
-      switch (this.tooltipPosition) {
+      const verticalCenter = (bottom - top) / 2 + top;
+      const horizontalCenter = (right - left) / 2 + left;
+      const tooltipWidth = this.componentRef.instance.tooltip.nativeElement.offsetWidth;
+      const tooltipHeight = this.componentRef.instance.tooltip.nativeElement.offsetHeight;
+      switch (tooltipPosition) {
         case 'right': {
-          this.componentRef.instance.left = Math.round(right);
-          this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+          this.setTooltipRight(tooltipHeight, tooltipWidth, verticalCenter, right);
           break;
         }
         case 'left': {
-          this.componentRef.instance.left = Math.round(left);
-          this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+          this.setTooltipLeft(tooltipHeight, tooltipWidth, verticalCenter, left);
           break;
         }
         case 'above': {
-          this.componentRef.instance.left = Math.round((right - left) / 2 + left);
-          this.componentRef.instance.top = Math.round(top);
+          this.setTooltipAbove(tooltipHeight, tooltipWidth, horizontalCenter, top);
           break;
         }
         default: { // below
-          this.componentRef.instance.left = Math.round((right - left) / 2 + left);
-          this.componentRef.instance.top = Math.round(bottom);
+          this.setTooltipBelow(tooltipHeight, tooltipWidth, horizontalCenter, bottom);
           break;
         }
       }
     }
   }
 
+  private setTooltipRight(tooltipHeight: number, tooltipWidth: number, verticalCenter: number, right: number): void {
+    const topPos = BaseTooltipDirective.getTopPosition(verticalCenter, tooltipHeight);
+    if (right + tooltipWidth > document.body.offsetWidth) {
+      this.componentRef!.instance.maxWidth = `${document.body.offsetWidth - right}px`;
+      setTimeout(() => {
+        const toolTipInnerWidth = this.componentRef!.instance.tooltip.nativeElement.children[0].offsetWidth;
+        if (right + toolTipInnerWidth > document.body.offsetWidth) {
+          this.componentRef!.instance.left = Math.round(document.body.offsetWidth - toolTipInnerWidth - 10);
+          const newToolTipInnerHeight = this.componentRef!.instance.tooltip.nativeElement.children[0].offsetHeight;
+          const newTopPos = BaseTooltipDirective.getTopPosition(verticalCenter, newToolTipInnerHeight);
+          this.componentRef!.instance.top = Math.round(newTopPos);
+        }
+      });
+    }
+    this.setPosition(right, topPos);
+  }
+
+  private setTooltipLeft(tooltipHeight: number, tooltipWidth: number, verticalCenter: number, left: number): void {
+    const leftPos = left - tooltipWidth < 0 ? 0 : left - tooltipWidth;
+    const topPos = BaseTooltipDirective.getTopPosition(verticalCenter, tooltipHeight);
+    if (left - tooltipWidth < 0) {
+      this.componentRef!.instance.maxWidth = `${left}px`;
+      setTimeout(() => {
+        const newToolTipInnerHeight = this.componentRef!.instance.tooltip.nativeElement.children[0].offsetHeight;
+        const newTopPos = BaseTooltipDirective.getTopPosition(verticalCenter, newToolTipInnerHeight);
+        this.componentRef!.instance.top = Math.round(newTopPos);
+      });
+    }
+    this.setPosition(leftPos, topPos);
+  }
+
+  private setTooltipAbove(tooltipHeight: number, tooltipWidth: number, horizontalCenter: number, top: number): void {
+    const leftPos = horizontalCenter < (tooltipWidth / 2) ? 0 : horizontalCenter - (tooltipWidth / 2);
+    const topPos = top - tooltipHeight < 5 ? 5 : top - tooltipHeight - 5;
+    this.setPosition(leftPos, topPos);
+  }
+
+  private setTooltipBelow(tooltipHeight: number, tooltipWidth: number, horizontalCenter: number, bottom: number): void {
+    const leftPos = horizontalCenter < (tooltipWidth / 2) ? 0 : horizontalCenter - (tooltipWidth / 2);
+    const topPos = bottom + tooltipHeight + 5 > document.body.offsetHeight ?
+      document.body.offsetHeight - tooltipHeight - 5 : bottom + 5;
+    this.setPosition(leftPos, topPos);
+  }
+
+  private static getTopPosition(verticalCenter: number, tooltipHeight: number): number {
+    if (verticalCenter < (tooltipHeight / 2)) {
+      return 5;
+    }
+    if (verticalCenter + (tooltipHeight / 2) > document.body.offsetHeight) {
+      return document.body.offsetHeight - tooltipHeight - 5;
+    }
+    return verticalCenter - (tooltipHeight / 2);
+  }
+
+  private setPosition(left: number, top: number): void {
+    this.componentRef!.instance.left = Math.round(left);
+    this.componentRef!.instance.top = Math.round(top);
+  }
+
   private destroyComponent(): void {
     if (this.timeoutId !== null) {
       clearTimeout(this.timeoutId);

projects/common/components/tooltip/tooltip.component.scss

-.tooltip {
-  background-color: black;
-  border-radius: 4px;
-  color: #ffffff;
-  font-size: 13px;
-  max-width: 30%;
-  padding: 3px 6px;
-  position: absolute;
-  z-index: 10;
-  &--below {
-    transform:translateX(-50%);
-    margin-top: 7px;
-  }
+:host {
+  display: block;
+}
 
-  &--above {
-    transform:translate(-50%, -100%);
-    margin-bottom: 7px;
+@keyframes fade-in {
+  0% {
+    opacity: 0;
   }
-
-  &--left {
-    transform:translate(calc(-100% - 7px), -50%);
+  100% {
+    opacity: 1;
   }
+}
 
-  &--right {
-    transform:translateY(-50%);
-    margin-left: 7px;
+.tooltip {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 10;
+  animation: fade-in 300ms;
+  margin-left: 5px;
+  pointer-events: none;
+  .tooltip-text {
+    background-color: black;
+    border-radius: 4px;
+    padding: 3px 6px;
+    color: #ffffff;
+    font-size: 13px;
+    width: fit-content;
   }
 }

projects/common/components/tooltip/tooltip.component.ts

-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { TooltipPosition } from 'common/models/elements/element';
 
 @Component({
   selector: 'aspect-tooltip',
   template: `
-    <div class="tooltip"
-         [ngClass]="['tooltip--'+tooltipPosition]"
+    <div #tooltip
+         class="tooltip"
          [style.left.px]="left"
-         [style.top.px]="top">
-      {{tooltipText}}
+         [style.top.px]="top"
+         [style.max-width]="maxWidth">
+      <div #tooltipInner
+           class="tooltip-text">
+        {{tooltipText}}
+      </div>
     </div>
   `,
   styleUrls: ['./tooltip.component.scss']
@@ -18,4 +22,8 @@ export class TooltipComponent {
   tooltipPosition: TooltipPosition = 'below';
   left: number = 0;
   top: number = 0;
+  maxWidth: string = '30%';
+
+  @ViewChild('tooltip') tooltip!: ElementRef;
+  @ViewChild('tooltip') tooltipInner!: ElementRef;
 }