Add tooltip style and refactor positioning

BioComputingUP · Jul 13, 2024 · fffff18 · fffff18
1 parent ac34863
commit fffff18
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 29 deletions.
diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html
@@ -49,18 +49,8 @@ <h1>Feature viewer</h1>
         <!-- Tooltip template -->
         <ng-template let-trace="trace" let-feature="feature" let-index="index" let-coordinates="coordinates"
                      ngx-features-viewer-tooltip>
-          <div class="card">
-            <div class="card-header">
-              <h5 class="card-title">{{ feature.label }}</h5>
-            </div>
-            <div class="card-body">
-              <p class="card-text">
-                {{ index }}
-              </p>
-              <p class="card-text">
-                {{ coordinates }}
-              </p>
-            </div>
+          <div>
+            {{ feature.label }}
           </div>
 
           <!--          <ngx-features-viewer [sequence]="sequence" [settings]="settings.inner" [traces]="[trace]">-->

diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts
@@ -56,7 +56,7 @@ export class PageFeaturesViewerComponent {
       'text-color' : 'black',
       // Define margins
       'margin-top' : 0,
-      'margin-right' : 50,
+      'margin-right' : 0,
       'margin-bottom' : 0,
       'margin-left' : 140,
       'sequence-show' : true,

diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html
@@ -26,7 +26,7 @@
 </div>
 
 <!-- Initialize tooltip -->
-<div style="position: fixed; left: 0; top: 0; display: none" #tooltip>
+<div class="tooltip" #tooltip>
   <!-- Define tooltip inner scaffold -->
   <div style="position: relative; display: block">
     <!-- Subscribe to template emission -->

diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss
@@ -67,3 +67,31 @@ text {
   //font-family: monospace;
   user-select: none;
 }
+
+
+.tooltip {
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    margin: 0;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    border-style: solid;
+    white-space: nowrap;
+    z-index: 9999999;
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
+    transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
+    background-color: rgb(255, 255, 255);
+    border-width: 1px;
+    border-radius: 4px;
+    color: rgb(102, 102, 102);
+    font: 14px / 21px sans-serif;
+    padding: 10px;
+    transform: translate3d(0px, 0px, 0px);
+    border-color: rgb(255, 255, 255);
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+}
+
diff --git a/projects/ngx-features-viewer/src/lib/services/tooltip.service.ts b/projects/ngx-features-viewer/src/lib/services/tooltip.service.ts
@@ -38,26 +38,34 @@ export class TooltipService {
 
   constructor(public initializeService: InitializeService) { }
 
+  private getTooltipSize(tooltip: Selection<HTMLDivElement, unknown, null, unknown>) {
+    // Define tooltip size
+    const width = tooltip.node()?.clientWidth || 0;
+    const height = tooltip.node()?.clientHeight || 0;
+    return { width, height };
+  }
+
   private setTooltipPosition(event: MouseEvent) {
     const tooltip = this._tooltip;
 
-    // If we are over the center of the page, we move the tooltip to the left
-    if (event.clientX > window.innerWidth / 2) {
-      tooltip.style("left", "auto");
-      tooltip.style("right", `${window.innerWidth - event.clientX + 10}px`);
-    } else {
-      tooltip.style("right", "auto");
-      tooltip.style("left", `${event.clientX + 10}px`);
+    // Get tooltip size
+    const { width, height } = this.getTooltipSize(tooltip);
+
+    // Default position at bottom left
+    let offsetX = 10;
+    let offsetY = 10;
+
+    // Adjust if the tooltip would go out of bounds
+    if (event.clientX + offsetX + width > window.innerWidth) {
+      offsetX = -width - 10;
     }
 
-    if (event.clientY > window.innerHeight / 2) {
-      tooltip.style("top", "auto");
-      tooltip.style("bottom", `${window.innerHeight - event.clientY + 10}px`);
-    } else {
-      tooltip.style("bottom", "auto");
-      tooltip.style("top", `${event.clientY + 10}px`);
+    if (event.clientY + offsetY + height > window.innerHeight) {
+      offsetY = -height - 10;
     }
 
+    // Apply the new position using transform
+    tooltip.style("transform", `translate(${event.clientX + offsetX}px, ${event.clientY + offsetY}px)`);
   }
 
   public onMouseEnter(event: MouseEvent, trace: InternalTrace, feature?: Feature, index?: number) {
@@ -68,7 +76,8 @@ export class TooltipService {
     // Emit tooltip context
     this.tooltip$.next({ trace, feature, index, coordinates });
     // Set tooltip visible
-    tooltip.style("display", "block");
+    tooltip.style("opacity", "1");
+    tooltip.style("visibility", "visible");
 
     this.setTooltipPosition(event);
   }
@@ -88,7 +97,8 @@ export class TooltipService {
     // Define tooltip
     const tooltip = this._tooltip;
     // Hide tooltip
-    tooltip.style("display", "none");
+    tooltip.style("opacity", "0");
+    tooltip.style("visibility", "hidden");
     // Remove tooltip context
     this.tooltip$.next(null);
   }