Add tooltip to timeline

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html

@@ -26,7 +26,7 @@
         <div class="node" [id]="'confirmed'">
           <div class="acc-to-confirmed left go-faster"></div>
           <div class="shape-border waiting">
-            <div class="shape animate"></div>
+            <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
         </div>
@@ -58,7 +58,7 @@
       <div class="nodes">
         <div class="node" [id]="'first-seen'">
           <div class="seen-to-acc right"></div>
-          <div class="shape-border">
+          <div class="shape-border hovering" (pointerover)="onHover($event, 'seen');" (pointerout)="onBlur($event);">
             <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
@@ -80,7 +80,7 @@
           } @else {
           <div class="seen-to-acc right"></div>
           }
-          <div  class="shape-border">
+          <div  class="shape-border hovering" (pointerover)="onHover($event, 'accelerated');" (pointerout)="onBlur($event);">
             <div class="shape"></div>
             @if (!tx.status.confirmed) {
             <div class="connector down loading"></div>
@@ -113,7 +113,10 @@
           } @else {
           <div class="seen-to-acc left"></div>
           }
-          <div class="shape-border" [class.waiting]="!tx.status.confirmed">
+          <div class="shape-border" 
+              [ngClass]="{'waiting': !tx.status.confirmed, 'hovering': tx.status.confirmed}"
+              (pointerover)="onHover($event, tx.status.confirmed ? 'mined' : null)" 
+              (pointerout)="onBlur($event);">
             <div class="shape"></div>
           </div>
           @if (tx.status.confirmed) {
@@ -130,4 +133,10 @@
       </div>
     </div>
   </div>
+
+  <app-acceleration-timeline-tooltip
+  [accelerationInfo]="hoverInfo"
+  [cursorPosition]="tooltipPosition"
+></app-acceleration-timeline-tooltip>
+
 </div>