Use material tooltip allover

static/src/app/admin/admin.component.html

@@ -54,7 +54,7 @@
             </select>
           </td>
           <td class="text-center">
-            <span class="glyphicon glyphicon-trash trash" title="Löschen" (click)="deleteUser(user)"></span>
+            <span class="glyphicon glyphicon-trash trash" matTooltip="Löschen" (click)="deleteUser(user)"></span>
           </td>
         </tr>
         </tbody>

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -6,7 +6,8 @@
   </mat-button-toggle-group>
   <button mat-icon-button class="add-btn">
     <mat-icon svgIcon="{{addButton.svgIcon}}"
-              title="{{addButton.tooltip}}"
+              matTooltip="{{addButton.tooltip}}"
-              (click)="add()"></mat-icon>
+              (click)="add()">
+    </mat-icon>
   </button>
 </div>

static/src/app/decorations/decoration-list/decoration-item.component.html

@@ -18,7 +18,7 @@
            [style.max-width]="imgStyle.width"
            [style.margin-top]="imgStyle.marginTop"
            class="decoration-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/ranks/rank-list/rank-item.component.html

@@ -13,7 +13,7 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" class="rank-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
 
   </div>

static/src/app/request/confirm-award/confirm-award.component.html

@@ -32,7 +32,6 @@
         <td>
           <textarea style="width:100%;"
                     rows="3"
-                    title="reason"
                     #reason>{{award.reason}}</textarea>
         </td>
         <td>
@@ -44,7 +43,6 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    title="rejectReason"
                     placeholder="Begründung für Ablehnung (optional)"
                     #rejectReason></textarea>
         </td>

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -38,7 +38,6 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    title="rejectReason"
                     placeholder="Begründung für Ablehnung (optional)"
                     #rejectReason></textarea>
         </td>

static/src/app/shared.module.ts

@@ -4,15 +4,16 @@ import {ShowErrorComponent} from './common/show-error/show-error.component';
 import {CommonModule} from '@angular/common';
 import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component';
 import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component';
-import {MatButtonToggleModule} from '@angular/material';
+import {MatButtonToggleModule, MatTooltipModule} from '@angular/material';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 
 @NgModule({
   declarations: [ShowErrorComponent, ListFilterComponent, SearchFieldComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    MatTooltipModule],
   exports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule, ShowErrorComponent,
-    ListFilterComponent, SearchFieldComponent],
+    ListFilterComponent, SearchFieldComponent, MatTooltipModule],
 })
 export class SharedModule {
 }

static/src/app/squads/squad-list/squad-item.component.html

@@ -12,7 +12,7 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" height="50px" class="squad-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/statistic/campaign/highscore/highscore.component.html

@@ -38,7 +38,7 @@
       <ngx-datatable-column [width]="valueColWidth" prop="{{attributeMap.prop}}">
         <ng-template ngx-datatable-header-template let-sort="sortFn">
         <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{attributeMap.head}}" (click)="sort()">
+          <span class="datatable-header-cell-label text-truncate" matTooltip="{{attributeMap.head}}" (click)="sort()">
             <img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">
           </span>
         </span>

static/src/app/statistic/war/war-list/war-item.component.html

@@ -11,8 +11,8 @@
 
     <div *ngIf="loginService.hasPermission(3)"
          class="interact-ico-container">
-      <span class="glyphicon glyphicon-edit" (click)="edit(); $event.stopPropagation()" title="Bearbeiten"></span>
+      <span class="glyphicon glyphicon-edit" (click)="edit(); $event.stopPropagation()" matTooltip="Bearbeiten"></span>
-      <span class="glyphicon glyphicon-trash"  (click)="delete(); $event.stopPropagation()" title="Löschen"></span>
+      <span class="glyphicon glyphicon-trash"  (click)="delete(); $event.stopPropagation()" matTooltip="Löschen"></span>
     </div>
   </div>
 </div>

static/src/app/statistic/war/war-list/war-list.component.html

@@ -15,10 +15,10 @@
           {{campaign.title}}
         </mat-panel-title>
         <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
-          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" title="Löschen"
+          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" matTooltip="Löschen"
                 class="glyphicon glyphicon-trash trash">
           </span>
-          <span (click)="editCampaign(campaign); $event.stopPropagation()" title="Bearbeiten"
+          <span (click)="editCampaign(campaign); $event.stopPropagation()" matTooltip="Bearbeiten"
                 class="glyphicon glyphicon-edit trash"
                 style="padding-right: 10px;">
           </span>

static/src/app/users/user-list/user-item.component.html

@@ -13,9 +13,9 @@
     </div>
 
     <div class="col-sm-4">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen"
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen"
             class="glyphicon glyphicon-trash trash pull-right"></span>
-      <span (click)="award(); $event.stopPropagation()" title="Auszeichnungen" class="icon-award pull-right"></span>
+      <span (click)="award(); $event.stopPropagation()" matTooltip="Auszeichnungen" class="icon-award pull-right"></span>
     </div>
   </div>
 </div>