[UXP-126] edit tooltip positioning

Author: Andrea Barbasso

src/app/directives/text-select/text-select.directive.ts

@@ -127,8 +127,10 @@ export class TextSelectDirective implements OnInit, OnDestroy {
 
               document.body.appendChild(domElem);
 
-              this.componentRef.instance.left = localRectangle.left + localRectangle.width / 2;
-              this.componentRef.instance.top = localRectangle.top;
+              this.componentRef.instance.rectangleLeft = localRectangle.left;
+              this.componentRef.instance.rectangleTop = localRectangle.top;
+              this.componentRef.instance.rectangleWidth = localRectangle.width;
+              this.componentRef.instance.rectangleHeight = localRectangle.height;
               this.componentRef.instance.text = stringSelection;
 
               this.selectedText = stringSelection;

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.html

@@ -1 +1,4 @@
-<p (mousedown)="textToSpeech($event)">Click me for TTS</p>
+<div class="p-2 text-white">
+  <i (click)="textToSpeech($event)" class="button fa fa-volume-high"></i>
+</div>
+<div class="pointer-down">&nbsp;</div>

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.scss

@@ -1,10 +1,20 @@
 :host {
   position: absolute;
   z-index: 9999;
-  background-color: #f5f5f5;
+  background-color: var(--bs-gray-900);
   transform: translate(-50%, -100%);
 }
 
-p {
+i.button {
   cursor: pointer;
 }
+
+div.pointer-down {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  background-color: var(--bs-gray-900);
+  transform: translateX(-50%) translateY(50%) rotate(45deg);
+  width: 12px;
+  height: 12px;
+}

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
   selector: 'ds-text-selection-tooltip',
@@ -7,21 +7,42 @@ import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, O
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true
 })
-export class TextSelectionTooltipComponent implements OnDestroy {
+export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
 
   @Input()
+  rectangleLeft = 0;
+
+  @Input()
+  rectangleTop = 0;
+
+  @Input()
+  rectangleWidth = 0;
+
+  @Input()
+  rectangleHeight = 0;
+
+  @Input()
+  text: string;
+
   @HostBinding('style.left.px')
   left: number;
 
-  @Input()
   @HostBinding('style.top.px')
   top: number;
 
-  @Input()
-  text: string;
+  @HostBinding('style.right.px')
+  right: number;
+
+  @HostBinding('style.bottom.px')
+  bottom: number;
 
   utterance: SpeechSynthesisUtterance;
 
+  ngOnInit(): void {
+    this.top = this.rectangleTop - 6;
+    this.left = this.rectangleLeft + this.rectangleWidth / 2;
+  }
+
   // listen to mousedown on host element to avoid clearing selection
   @HostListener('mousedown', ['$event'])
   public handleMousedown(event: MouseEvent): void {