Work on the jump tooltip

Front/skydivelogs-app/src/app/app.module.ts

@@ -52,6 +52,7 @@ import { MatTabsModule } from "@angular/material/tabs";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatCardModule } from "@angular/material/card";
 import { MatRadioModule } from "@angular/material/radio";
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { CachingInterceptor } from "../interceptor/caching.interceptor";
 //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
@@ -156,6 +157,7 @@ const appRoutes: Routes = [
     MatDialogModule,
     MatCardModule,
     MatRadioModule,
+    MatTooltipModule
   ],
   exports: [HttpClientModule],
   providers: [

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

@@ -1,21 +1,34 @@
 <div class="content">
-  <button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']" skipLocationChange>Add jumps</button>
-
   <div *ngIf="dataSourceTable != null else loading">
+    <button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']" skipLocationChange>Add jumps</button>
+
     <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;"
-                     (mouseover)='showPopin($event, element)'
-                     (mouseout)='hidePopin($event, element)'>
-          <mat-icon aria-hidden="false" aria-label="All informations of the jump" 
-                    style="cursor: pointer;">info</mat-icon>
-          <div [ngClass]="calculateClasses(element)" style="display: none;">
+        <td mat-cell *matCellDef="let element" style="text-align: left;">
+          <mat-icon aria-hidden="false" aria-label="All informations of the jump" style="cursor: pointer;"
+                    #tooltip="matTooltip" matTooltip="Tooltips in Angular" matTooltipPosition="above"
+                    (click)="tooltip.toggle()">info</mat-icon>
+
+          <ng-template #popinContent>
+            <span>
+              Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
+              <br>Cutaway : {{element.withCutaway}}
+              <br>Notes : {{element.notes}}
+            </span>
+          </ng-template>
+
+
+          <!-- 
+            (mouseover)='showPopin($event, element)'
+            (mouseout)='hidePopin($event, element)'
+
+            <div [ngClass]="calculateClasses(element)" style="display: none;">
             <span>
             Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
             <br>Cutaway : {{element.withCutaway}}
             <br>Notes : {{element.notes}}</span>
-          </div>
+          </div> -->
         </td>
       </ng-container>
 

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,3 +1,4 @@
+
 <div class="content">
   <button mat-raised-button color="accent" [routerLink]="['/jumps']" [routerLinkActive]="['active']" skipLocationChange>View the jumps</button>