Begining of the style of info popin

for the jumps

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css

@@ -27,16 +27,12 @@ table {
   padding-top: 25px;
 }
 
-.stylePopin {
-  position: relative;
-  right: -25px;
-  top: -25px;
-  border: 1px solid black;
-  /* z-index: 1000; */
-}
 .showPopin {
-  display: '';
-}
-.hidePopin {
-  display: none;
-}
+  display: inline-block !important;
+  position: relative;
+  /* right: -25px;
+  top: -25px; */
+  border: 1px solid black;
+  min-width: 125px;
+  z-index: 1000;
+}

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -3,10 +3,12 @@
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="infos">
         <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;">
+        <td mat-cell *matCellDef="let element" style="text-align: left;"
+                     (mouseover)='showPopin($event, element)'
+                     (mouseout)='hidePopin($event, element)'>
           <mat-icon aria-hidden="false" aria-label="All informations of the jump" 
-                    (click)="showPopin($event, element)">info</mat-icon>
-          <div [ngClass]="calculateClasses(element)">
+                    style="cursor: pointer;">info</mat-icon>
+          <div [ngClass]="calculateClasses(element)" style="display: none;">
             <span>
             Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
             <br>Cutaway : {{element.withCutaway}}

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -24,8 +24,7 @@ export class ListOfJumpsComponent implements OnInit {
   ];
   public dataSourceTable;
   public resultsLength = 0;
-  private previousElementId = -1;
-  private closePopin = false;
+  private showPopinForItemId = -1;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -51,23 +50,16 @@ export class ListOfJumpsComponent implements OnInit {
   }
 
   showPopin(event, item) {
-    let elementId = item.id;
+    this.showPopinForItemId = item.id;
+  }
 
-    if (this.previousElementId == -1) {
-      this.previousElementId = elementId;
-    }
-
-    this.closePopin = (elementId === this.previousElementId);
-    if (elementId != this.previousElementId) {
-      this.previousElementId = elementId;
-    }
+  hidePopin(event, item) {
+    this.showPopinForItemId = -1;
   }
 
   calculateClasses(item) {
     return {
-      'showPopin': !this.closePopin || item.id === this.previousElementId,
-      'hidePopin': this.closePopin || item.id != this.previousElementId,
-      'stylePopin': true
+      'showPopin': this.showPopinForItemId != -1 && item.id === this.showPopinForItemId,
   };
   }
 }