fix: add titles for tooltip of structure details

src/app/models/structure.model.ts

@@ -158,15 +158,17 @@ export class Structure {
   public getEquipmentsTitle(equipment: Equipment): string {
     switch (equipment) {
       case Equipment.wifi:
-        return 'Wifi';
+        return 'Wifi en accès libre';
       case Equipment.bornes:
-        return 'Bornes';
+        return this.nbNumericTerminal > 1 ? 'Bornes numériques' : 'Borne numérique';
       case Equipment.printer:
-        return 'Imprimantes';
+        return this.nbPrinters > 1 ? 'Imprimantes' : 'Imprimante';
       case Equipment.tablet:
-        return 'Tablettes';
+        return this.nbTablets > 1 ? 'Tablettes' : 'Tablette';
       case Equipment.computer:
-        return 'Ordinateurs';
+        return this.nbComputers > 1 ? 'Ordinateurs à disposition' : 'Ordinateur à disposition';
+      case Equipment.scanner:
+        return this.nbScanners > 1 ? 'Scanners' : 'Scanner';
       default:
         return null;
     }

src/app/shared/components/svg-icon/svg-icon.component.html

-<svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor" [attr.stroke]="iconColor">
-  <title *ngIf="title">{{ title }}</title>
-  <use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
-</svg>
+<div app-tooltipDirective title="{{ title }}">
+  <ng-template #tooltipTemplate>
+    <div class="tooltip">{{ title }}</div>
+  </ng-template>
+  <svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor" [attr.stroke]="iconColor">
+    <use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
+  </svg>
+</div>

src/app/shared/components/tooltip/tooltip.directive.ts

+import {
+  Input,
+  Renderer2,
+  HostListener,
+  Directive,
+  ElementRef,
+  TemplateRef,
+  ViewContainerRef,
+  ContentChild,
+} from '@angular/core';
+
+@Directive({ selector: '[app-tooltipDirective]' })
+export class TooltipDirective {
+  @Input() title: string;
+  constructor(
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    private viewContainerRef: ViewContainerRef
+  ) {}
+
+  @Input() parametroPlantilla: TemplateRef<any>;
+
+  @ContentChild('tooltipTemplate') private tooltipTemplateRef: TemplateRef<object>;
+
+  @HostListener('mouseenter') onMouseEnter(): void {
+    if (this.title && this.title.length > 0) {
+      const view = this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
+      view.rootNodes.forEach((node) => this.renderer.appendChild(this.elementRef.nativeElement, node));
+    }
+  }
+
+  @HostListener('mouseleave') onMouseLeave(): void {
+    if (this.viewContainerRef) {
+      this.viewContainerRef.clear();
+    }
+  }
+}

src/app/shared/directives/index.ts

+import { TooltipDirective } from '../components/tooltip/tooltip.directive';
 import { ModalOutsideDirective } from './modalOutside.directive';
 
 export { ModalOutsideDirective };
 
 // tslint:disable-next-line:variable-name
-export const SharedDirectives = [ModalOutsideDirective];
+export const SharedDirectives = [ModalOutsideDirective, TooltipDirective];

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -18,6 +18,7 @@
               [type]="'ico'"
               [iconColor]="'currentColor'"
               [icon]="structure.getEquipmentsIcon(equipement)"
+              [title]="getEquipmentsLabel(equipement)"
             ></app-svg-icon>
           </div>
         </div>
@@ -39,14 +40,15 @@
               class="hide-on-print"
               [structure]="structure"
               [isCalledByDetails]="true"
+              [title]="'Horaire d\'ouverture'"
             ></app-structure-opening-status>
           </div>
           <div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'adress'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
           </div>
           <div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'web'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon>
             <a
               target="_blank"
               class="custom-link"
@@ -65,7 +67,7 @@
                 rel="noopener noreferrer"
                 [href]="'http://' + structure.facebook"
               >
-                <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="Facebook"></app-svg-icon
+                <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon
               ></a>
               <a
                 *ngIf="structure.twitter"
@@ -74,7 +76,7 @@
                 rel="noopener noreferrer"
                 [href]="'http://' + structure.twitter"
               >
-                <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="Twitter"></app-svg-icon
+                <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon
               ></a>
               <a
                 *ngIf="structure.instagram"
@@ -83,7 +85,7 @@
                 rel="noopener noreferrer"
                 [href]="'http://' + structure.instagram"
               >
-                <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="Instagram"></app-svg-icon
+                <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon
               ></a>
               <a
                 *ngIf="structure.linkedin"
@@ -92,12 +94,12 @@
                 rel="noopener noreferrer"
                 [href]="'http://' + structure.linkedin"
               >
-                <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="Linkedin"></app-svg-icon
+                <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon
               ></a>
             </div>
           </div>
           <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'tel'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
             <p>{{ structure.contactPhone | phone }}</p>
           </div>
         </div>
@@ -108,11 +110,11 @@
             fxLayoutAlign="none center"
             fxLayoutGap="13px"
           >
-            <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
             <p>{{ structure.contactMail }}</p>
           </div>
           <div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'pass'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [icon]="'pass'" [title]="'Pass numérique'"></app-svg-icon>
             <p>agréé Pass Numérique</p>
           </div>
           <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">

src/styles.scss

@@ -278,3 +278,18 @@ button {
   max-width: 50%;
   margin: 0 auto;
 }
+
+[app-tooltipDirective] {
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  white-space: nowrap;
+  left: 0;
+  padding: 10px;
+  background: $grey;
+  color: $white;
+  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
+}