add tooltip

src/app/app.module.ts

@@ -18,6 +18,7 @@ import {AddLayerComponent} from './add-layer-component/add-layer.component';
 import {FeatureManagerComponent} from './feature-management/feature-manager/feature-manager.component';
 import {CustomColorEntryComponent} from './feature-management/custom-color-entry/custom-color-entry.component';
 import {ColorPickerModule} from 'ngx-color-picker';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import {ColorPickerModule} from 'ngx-color-picker';
     MatInputModule,
     MatDialogModule,
     MatTableModule,
+    MatTooltipModule,
     ColorPickerModule
   ],
   entryComponents: [

src/app/map/map.component.html

@@ -30,9 +30,13 @@
   <div class="layer-control-area">
     <mat-card>
       <mat-card-header>
-        <mat-card-title>Layer</mat-card-title>
+        <mat-card-title>Layer
+        </mat-card-title>
         <div class="controls">
-          <i class="material-icons" (click)="addLayer()">add_circle</i>
+          <i class="material-icons"
+             matTooltip="Über diese Schaltfläche können Sie neue Layer hinzufügen.
+             Bitte beachten Sie, dass die Reihenfolge der Layer in der Liste umgekehrt gegenüber Reihenfolge in der Map ist."
+             (click)="addLayer()">add_circle</i>
         </div>
       </mat-card-header>
       <mat-card-content>

src/app/map/map.component.scss

@@ -40,6 +40,10 @@
   .layer-control-area {
     max-width:25vw;
 
+    .controls {
+      cursor: pointer;
+    }
+
     .layer-list {
       max-width: 100%;
       border: solid 1px #ccc;