Revert "ACS-8106: (a11y) Replace Material Tooltip with standard tooltip (#9894)" (#9905)

This reverts commit f3a94bdfa4.

lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html

@@ -12,7 +12,8 @@
             mat-icon-button
             (click)="toggleCompact()"
             color="primary"
-            [title]="'CORE.BREADCRUMBS.SHOWALL' | translate"
+            [matTooltip]="'CORE.BREADCRUMBS.SHOWALL' | translate"
+            matTooltipClass="adf-tooltip"
             [attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate"
           >
             <mat-icon class="adf-breadcrumb__show-all-button-icon--rotate">more_vert</mat-icon >

lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts

@@ -15,24 +15,11 @@
  * limitations under the License.
  */
 
-import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChildren,
-    EventEmitter,
-    Input,
-    OnChanges,
-    Output,
-    QueryList,
-    SimpleChanges,
-    TemplateRef,
-    ViewChildren
-} from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, TemplateRef, ViewChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { map, startWith } from 'rxjs/operators';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -45,7 +32,7 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [CommonModule, MatIconModule, TranslateModule, MatButtonModule, BreadcrumbFocusDirective]
+    imports: [ CommonModule, MatIconModule, TranslateModule, MatButtonModule, MatTooltipModule ]
 })
 export class BreadcrumbComponent implements AfterContentInit, OnChanges {
     private _breadcrumbTemplateRefs: Array<TemplateRef<unknown>> = [];
@@ -70,7 +57,9 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
         this.breadcrumbItems.changes
             .pipe(
                 startWith(this.breadcrumbItems),
-                map((breadcrumbItems: QueryList<BreadcrumbItemComponent>) => this.mapToTemplateRefs(breadcrumbItems))
+                map((breadcrumbItems: QueryList<BreadcrumbItemComponent>) =>
+                    this.mapToTemplateRefs(breadcrumbItems)
+                )
             )
             .subscribe((templateRefs) => {
                 this._breadcrumbTemplateRefs = templateRefs;
@@ -94,11 +83,16 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
     }
 
     private setBreadcrumbs(breadcrumbs: Array<TemplateRef<unknown>>) {
-        this.selectedBreadcrumbs = this.compact && breadcrumbs.length > 2 ? [breadcrumbs[0], breadcrumbs[breadcrumbs.length - 1]] : [...breadcrumbs];
+        this.selectedBreadcrumbs =
+            this.compact && breadcrumbs.length > 2
+                ? [breadcrumbs[0], breadcrumbs[breadcrumbs.length - 1]]
+                : [...breadcrumbs];
         this.cdr.detectChanges();
     }
 
-    private mapToTemplateRefs(breadcrumbItems: QueryList<BreadcrumbItemComponent>) {
-        return breadcrumbItems.toArray().map((breadcrumbItem) => breadcrumbItem.templateRef);
+    private mapToTemplateRefs( breadcrumbItems: QueryList<BreadcrumbItemComponent> ) {
+        return breadcrumbItems
+            .toArray()
+            .map((breadcrumbItem) => breadcrumbItem.templateRef);
     }
 }

lib/core/feature-flags/src/lib/components/flags/flags.component.html

@@ -45,7 +45,7 @@
     <ng-container matColumnDef="value">
       <th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
         <div class="adf-input-field-buttons-container">
-          <button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
+          <button *ngIf="showPlusButton$ | async" mat-icon-button matTooltip="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
             <mat-icon class="material-icons-outlined" fontIcon="add_circle"></mat-icon>
           </button>
           <button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">

lib/core/feature-flags/src/lib/components/flags/flags.component.ts

@@ -34,6 +34,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlagsOverrideComponent } from '../feature-override-indicator.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
@@ -51,6 +52,7 @@ import { TranslateModule } from '@ngx-translate/core';
         MatIconModule,
         MatButtonModule,
         MatInputModule,
+        MatTooltipModule,
         MatDialogModule,
         TranslateModule
     ],

lib/core/src/lib/card-view/card-view.module.ts

@@ -30,6 +30,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -63,7 +64,8 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
         MatCardModule,
         MatDatetimepickerModule,
         MatNativeDatetimeModule,
-        MatSlideToggleModule
+        MatSlideToggleModule,
+        MatTooltipModule
     ],
     declarations: [
         CardViewComponent,

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -13,7 +13,8 @@
             *ngIf="showProperty"
             [attr.data-automation-id]="'card-dateitem-' + property.key"
             (dblclick)="copyToClipboard(property.displayValue)"
-            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+            matTooltipShowDelay="1000"
+            [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
             >{{ property.displayValue }}</span
         >
     </span>

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -34,7 +34,9 @@
                 [attr.aria-label]="property.label | translate"
                 [formControl]="textInput"
                 (dblclick)="copyToClipboard(property.displayValue)"
-                [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                matTooltipShowDelay="1000"
+                [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                [matTooltipDisabled]="isEditable"
                 [attr.data-automation-id]="'card-textitem-value-' + property.key"
                 (keydown)="undoText($event)"
             />
@@ -43,6 +45,7 @@
                 *ngIf="property.multiline"
                 title="{{ property.label | translate }}"
                 [cdkTextareaAutosize]="true"
+                [cdkAutosizeMaxRows]="1"
                 [cdkAutosizeMaxRows]="5"
                 class="adf-property-value"
                 [ngClass]="{

lib/core/src/lib/context-menu/context-menu-list.component.html

@@ -5,7 +5,7 @@
                     [attr.data-automation-id]="'context-' + (link.title || link.model?.title | translate)"
                     mat-menu-item
                     [disabled]="link.model?.disabled"
-                    [title]="link.model?.tooltip | translate"
+                    [matTooltip]="link.model?.tooltip | translate"
                     (click)="onMenuItemClick($event, link)">
                 <mat-icon *ngIf="link.model?.icon">{{ link.model.icon }}</mat-icon>
                 <span>{{ link.title || link.model?.title | translate }}</span>

lib/core/src/lib/context-menu/context-menu-list.component.ts

@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { contextMenuAnimation } from './animations';
 import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { CONTEXT_MENU_DATA } from './context-menu.tokens';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'adf-context-menu',
@@ -36,7 +37,7 @@ import { CONTEXT_MENU_DATA } from './context-menu.tokens';
         class: 'adf-context-menu'
     },
     encapsulation: ViewEncapsulation.None,
-    imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslateModule],
+    imports: [MatIconModule, MatMenuModule, MatTooltipModule, NgForOf, NgIf, TranslateModule],
     animations: [trigger('panelAnimation', contextMenuAnimation)]
 })
 export class ContextMenuListComponent implements AfterViewInit {

lib/core/src/lib/context-menu/context-menu.spec.ts

@@ -21,6 +21,7 @@ import { ContextMenuModule } from './context-menu.module';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { MatIconHarness } from '@angular/material/icon/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
 @Component({
@@ -196,5 +197,27 @@ describe('ContextMenuDirective', () => {
                 ).length
             ).toBe(0);
         });
+
+        it('should show tooltip if is set', async () => {
+            const expectedTooltipText = 'Action 5 tooltip';
+            const tooltip = await loader.getHarness(
+                MatTooltipHarness.with({
+                    selector: '[data-automation-id="context-action-5"]'
+                })
+            );
+            await tooltip.show();
+            expect(await tooltip.isOpen()).toBeTrue();
+            expect(await tooltip.getTooltipText()).toEqual(expectedTooltipText);
+        });
+
+        it('should not show tooltip if is not set', async () => {
+            const tooltip = await loader.getHarness(
+                MatTooltipHarness.with({
+                    selector: '[data-automation-id="context-action-6"]'
+                })
+            );
+            await tooltip.show();
+            expect(await tooltip.isOpen()).toBeFalse();
+        });
     });
 });

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -68,7 +68,7 @@
                         !isResizing && col.sortable}"
                 >
                     <ng-container *ngIf="!col.header">
-                        <span *ngIf="col.title" title="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
+                        <span *ngIf="col.title" matTooltip="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
 
                         <span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
                             {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
@@ -124,7 +124,7 @@
                 <ng-container *ngIf="mainActionTemplate">
                     <button
                         data-automation-id="adf-datatable-main-menu-button"
-                        title="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
+                        matTooltip="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
                         mat-icon-button
                         #mainMenuTrigger="matMenuTrigger"
                         (keydown.enter)="mainMenuTrigger.openMenu()"

lib/core/src/lib/form/components/middlewares/decimal-middleware.service.ts

@@ -32,7 +32,7 @@ export class DecimalRenderMiddlewareService implements FormFieldModelRenderMiddl
         return field;
     }
 
-    private forceMaxPrecisionIfNeeded(value: string | number, allowedMaxPrecision: number): string | number {
+    private forceMaxPrecisionIfNeeded(value: string | number, allowedMaxPrecision): string | number {
         let numberOfDecimalDigits = 0;
         const stringValue = typeof value === 'string' ? value : `${value}`;
         const numberChunks = stringValue.split('.');
@@ -42,9 +42,12 @@ export class DecimalRenderMiddlewareService implements FormFieldModelRenderMiddl
         }
 
         if (numberOfDecimalDigits > allowedMaxPrecision) {
-            return parseFloat(value.toString()).toFixed(allowedMaxPrecision);
+            const valueWithCorrectPrecision = parseFloat(value.toString())
+                .toFixed(allowedMaxPrecision);
+
+            return valueWithCorrectPrecision;
         }
 
         return value;
     }
-}
+};

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -12,7 +12,9 @@
         <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
             <span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
             <input matInput
-                   [title]="field.tooltip"
+                   [matTooltip]="field.tooltip"
+                   matTooltipPosition="above"
+                   [matTooltipShowDelay]="1000"
                    class="adf-input"
                    type="text"
                    [id]="field.id"

lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts

@@ -20,6 +20,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { CoreTestingModule } from '../../../../testing';
 import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
 import { ADF_AMOUNT_SETTINGS, AmountWidgetComponent } from './amount.widget';
@@ -89,8 +90,17 @@ describe('AmountWidgetComponent', () => {
             const input = await loader.getHarness(MatInputHarness);
             await (await input.host()).hover();
 
-            const tooltip = await (await input.host()).getAttribute('title');
-            expect(tooltip).toBe('my custom tooltip');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const input = await loader.getHarness(MatInputHarness);
+            await (await input.host()).hover();
+            await (await input.host()).mouseAway();
+
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.isOpen()).toBe(false);
         });
     });
 

lib/core/src/lib/form/components/widgets/amount/amount.widget.ts

@@ -22,6 +22,7 @@ import { Component, OnInit, ViewEncapsulation, InjectionToken, Inject, Optional
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -49,7 +50,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslateModule, NgIf],
+    imports: [MatFormFieldModule, MatTooltipModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslateModule, NgIf],
     encapsulation: ViewEncapsulation.None
 })
 export class AmountWidgetComponent extends WidgetComponent implements OnInit {

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html

@@ -6,8 +6,10 @@
                   [disabled]="field.readOnly || readOnly"
                   [(ngModel)]="field.value"
                   (ngModelChange)="onFieldChanged(field)"
-                  [title]="field.tooltip"
-                  (click)="markAsTouched()">
+                  [matTooltip]="field.tooltip"
+                  (click)="markAsTouched()"
+                  matTooltipPosition="right"
+                  [matTooltipShowDelay]="1000">
         {{ field.name | translate }}
         <span class="adf-asterisk" *ngIf="isRequired()">*</span>
     </mat-checkbox>

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.spec.ts

@@ -20,6 +20,8 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { TranslateLoader } from '@ngx-translate/core';
 import { CoreTestingModule } from '../../../../testing';
 import { TranslateLoaderService } from '../../../../translation';
@@ -34,7 +36,7 @@ describe('CheckboxWidgetComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule, MatCheckboxModule],
+            imports: [CoreTestingModule, MatCheckboxModule, MatTooltipModule],
             providers: [{ provide: TranslateLoader, useClass: TranslateLoaderService }]
         });
         fixture = TestBed.createComponent(CheckboxWidgetComponent);
@@ -108,8 +110,17 @@ describe('CheckboxWidgetComponent', () => {
                 const checkbox = await loader.getHarness(MatCheckboxHarness);
                 await (await checkbox.host()).hover();
 
-                const tooltip = await (await checkbox.host()).getAttribute('title');
-                expect(tooltip).toBe('my custom tooltip');
+                const tooltip = await loader.getHarness(MatTooltipHarness);
+                expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+            });
+
+            it('should hide tooltip', async () => {
+                const checkbox = await loader.getHarness(MatCheckboxHarness);
+                await (await checkbox.host()).hover();
+                await (await checkbox.host()).mouseAway();
+
+                const tooltip = await loader.getHarness(MatTooltipHarness);
+                expect(await tooltip.isOpen()).toBe(false);
             });
         });
     });

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts

@@ -21,6 +21,7 @@ import { NgClass, NgIf } from '@angular/common';
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -41,7 +42,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgClass, MatCheckboxModule, FormsModule, TranslateModule, ErrorWidgetComponent, NgIf],
+    imports: [NgClass, MatCheckboxModule, FormsModule, TranslateModule, MatTooltipModule, ErrorWidgetComponent, NgIf],
     encapsulation: ViewEncapsulation.None
 })
 export class CheckboxWidgetComponent extends WidgetComponent {

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -24,8 +24,10 @@
                    (dateChange)="onDateChanged($event)"
                    (keydown.enter)="datetimePicker.open()"
                    [placeholder]="field.placeholder"
-                   [title]="field.tooltip"
+                   [matTooltip]="field.tooltip"
                    (blur)="markAsTouched()"
+                   matTooltipPosition="above"
+                   [matTooltipShowDelay]="1000"
                    [min]="minDate"
                    [max]="maxDate">
             <mat-datetimepicker-toggle matSuffix [for]="datetimePicker"

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -19,6 +19,8 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { CoreTestingModule } from '../../../../testing';
 import { DateFieldValidator, DateTimeFieldValidator, FormFieldModel, FormFieldTypes, FormModel } from '../core';
 import { DateTimeWidgetComponent } from './date-time.widget';
@@ -32,7 +34,7 @@ describe('DateTimeWidgetComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule]
+            imports: [CoreTestingModule, MatTooltipModule]
         });
         fixture = TestBed.createComponent(DateTimeWidgetComponent);
 
@@ -244,8 +246,17 @@ describe('DateTimeWidgetComponent', () => {
             const input = await loader.getHarness(MatInputHarness);
             await (await input.host()).hover();
 
-            const tooltip = await (await input.host()).getAttribute('title');
-            expect(tooltip).toBe('my custom tooltip');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const input = await loader.getHarness(MatInputHarness);
+            await (await input.host()).hover();
+            await (await input.host()).mouseAway();
+
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.isOpen()).toBe(false);
         });
     });
 

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts

@@ -23,6 +23,7 @@ import { FormsModule } from '@angular/forms';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerInputEvent, MatDatetimepickerModule } from '@mat-datetimepicker/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { isValid } from 'date-fns';
@@ -42,7 +43,16 @@ import { WidgetComponent } from '../widget.component';
     ],
     templateUrl: './date-time.widget.html',
     styleUrls: ['./date-time.widget.scss'],
-    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, FormsModule, ErrorWidgetComponent],
+    imports: [
+        NgIf,
+        TranslateModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatDatetimepickerModule,
+        FormsModule,
+        MatTooltipModule,
+        ErrorWidgetComponent
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -24,8 +24,10 @@
                    (ngModelChange)="onFieldChanged(field)"
                    [disabled]="field.readOnly"
                    [placeholder]="field.placeholder"
-                   [title]="field.tooltip"
-                   (blur)="markAsTouched()" />
+                   [matTooltip]="field.tooltip"
+                   (blur)="markAsTouched()"
+                   matTooltipPosition="above"
+                   [matTooltipShowDelay]="1000" />
         </mat-form-field>
 
         <error-widget [error]="field.validationSummary"></error-widget>

lib/core/src/lib/form/components/widgets/decimal/decimal.component.spec.ts

@@ -20,6 +20,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatInputModule } from '@angular/material/input';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { CoreTestingModule } from '../../../../testing';
 import { FormService } from '../../../services/form.service';
 import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
@@ -57,8 +58,17 @@ describe('DecimalComponent', () => {
             const input = await loader.getHarness(MatInputHarness);
             await (await input.host()).hover();
 
-            const tooltip = await (await input.host()).getAttribute('title');
-            expect(tooltip).toBe('my custom tooltip');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const input = await loader.getHarness(MatInputHarness);
+            await (await input.host()).hover();
+            await (await input.host()).mouseAway();
+
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.isOpen()).toBe(false);
         });
     });
 

lib/core/src/lib/form/components/widgets/decimal/decimal.component.ts

@@ -20,6 +20,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -41,7 +42,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent],
+    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
     encapsulation: ViewEncapsulation.None
 })
 export class DecimalWidgetComponent extends WidgetComponent {

lib/core/src/lib/form/components/widgets/display-text/display-text.widget.html

@@ -1,3 +1,6 @@
-<div [title]="field.tooltip" class="adf-display-text-widget {{ field.className }}">
+<div [matTooltip]="field.tooltip"
+     matTooltipPosition="above"
+     [matTooltipShowDelay]="1000"
+     class="adf-display-text-widget {{ field.className }}">
     {{ field.value | translate }}
 </div>

lib/core/src/lib/form/components/widgets/display-text/display-text.widget.ts

@@ -18,6 +18,7 @@
 /* eslint-disable @angular-eslint/component-selector */
 
 import { Component, ViewEncapsulation } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { WidgetComponent } from '../widget.component';
@@ -38,7 +39,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [TranslateModule],
+    imports: [MatTooltipModule, TranslateModule],
     encapsulation: ViewEncapsulation.None
 })
 export class DisplayTextWidgetComponent extends WidgetComponent {

lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.html

@@ -2,7 +2,9 @@
     <label class="adf-label" [attr.for]="field.id">
         {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
     </label>
-    <div [title]="field.tooltip">
+    <div [matTooltip]="field.tooltip"
+         matTooltipPosition="above"
+         [matTooltipShowDelay]="1000">
         <a [href]="linkUrl" target="_blank" rel="nofollow">{{ linkText }}</a>
     </div>
 </div>

lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CoreTestingModule } from '../../../../testing';
 import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
 import { HyperlinkWidgetComponent } from './hyperlink.widget';
@@ -27,7 +28,7 @@ describe('HyperlinkWidgetComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule]
+            imports: [CoreTestingModule, MatTooltipModule]
         });
         fixture = TestBed.createComponent(HyperlinkWidgetComponent);
         widget = fixture.componentInstance;
@@ -198,7 +199,7 @@ describe('HyperlinkWidgetComponent', () => {
 
         fixture.detectChanges();
         const checkbox = fixture.debugElement.nativeElement.querySelector('.adf-hyperlink-widget div');
-        const tooltip = checkbox.getAttribute('title');
+        const tooltip = checkbox.getAttribute('ng-reflect-message');
 
         expect(tooltip).toEqual(widget.field.tooltip);
     });

lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.ts

@@ -19,6 +19,7 @@
 
 import { NgIf } from '@angular/common';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { FormFieldModel } from '../core';
@@ -40,7 +41,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [TranslateModule, NgIf],
+    imports: [TranslateModule, MatTooltipModule, NgIf],
     encapsulation: ViewEncapsulation.None
 })
 export class HyperlinkWidgetComponent extends WidgetComponent implements OnInit {

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -16,8 +16,10 @@
                   (ngModelChange)="onFieldChanged(field)"
                   [disabled]="field.readOnly || readOnly"
                   [placeholder]="field.placeholder"
-                  [title]="field.tooltip"
-                  (blur)="markAsTouched()">
+                  [matTooltip]="field.tooltip"
+                  (blur)="markAsTouched()"
+                  matTooltipPosition="above"
+                  [matTooltipShowDelay]="1000">
         </textarea>
     </mat-form-field>
     <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.spec.ts

@@ -19,6 +19,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { CoreTestingModule } from '../../../../testing';
 import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
 import { MultilineTextWidgetComponentComponent } from './multiline-text.widget';
@@ -52,8 +53,17 @@ describe('MultilineTextWidgetComponentComponent', () => {
             const input = await loader.getHarness(MatInputHarness);
             await (await input.host()).hover();
 
-            const tooltip = await (await input.host()).getAttribute('title');
-            expect(tooltip).toBe('my custom tooltip');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const input = await loader.getHarness(MatInputHarness);
+            await (await input.host()).hover();
+            await (await input.host()).mouseAway();
+
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.isOpen()).toBe(false);
         });
     });
 

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.ts

@@ -22,6 +22,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -43,7 +44,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [MatFormFieldModule, NgIf, TranslateModule, MatInputModule, FormsModule, ErrorWidgetComponent],
+    imports: [MatFormFieldModule, NgIf, TranslateModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
     encapsulation: ViewEncapsulation.None
 })
 export class MultilineTextWidgetComponentComponent extends WidgetComponent {

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -24,8 +24,10 @@
                    (ngModelChange)="onFieldChanged(field)"
                    [disabled]="field.readOnly"
                    [placeholder]="field.placeholder"
-                   [title]="field.tooltip"
-                   (blur)="markAsTouched()">
+                   [matTooltip]="field.tooltip"
+                   (blur)="markAsTouched()"
+                   matTooltipPosition="above"
+                   [matTooltipShowDelay]="1000">
         </mat-form-field>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"

lib/core/src/lib/form/components/widgets/number/number.widget.spec.ts

@@ -21,6 +21,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { CoreTestingModule } from '../../../../testing';
 import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
 import { NumberWidgetComponent } from './number.widget';
@@ -54,8 +55,17 @@ describe('NumberWidgetComponent', () => {
             const input = await loader.getHarness(MatInputHarness);
             await (await input.host()).hover();
 
-            const tooltip = await (await input.host()).getAttribute('title');
-            expect(tooltip).toBe('my custom tooltip');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const input = await loader.getHarness(MatInputHarness);
+            await (await input.host()).hover();
+            await (await input.host()).mouseAway();
+
+            const tooltip = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltip.isOpen()).toBe(false);
         });
     });
 

lib/core/src/lib/form/components/widgets/number/number.widget.ts

@@ -22,6 +22,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { DecimalNumberPipe } from '../../../../pipes';
 import { FormService } from '../../../services/form.service';
@@ -44,7 +45,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent],
+    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
     encapsulation: ViewEncapsulation.None
 })
 export class NumberWidgetComponent extends WidgetComponent implements OnInit {

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -23,8 +23,10 @@
                    [disabled]="field.readOnly || readOnly"
                    [textMask]="{mask: mask, isReversed: isMaskReversed}"
                    [placeholder]="placeholder"
-                   [title]="field.tooltip"
-                   (blur)="markAsTouched()">
+                   [matTooltip]="field.tooltip"
+                   (blur)="markAsTouched()"
+                   matTooltipPosition="above"
+                   [matTooltipShowDelay]="1000">
         </mat-form-field>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"

lib/core/src/lib/form/components/widgets/text/text.widget.spec.ts

@@ -28,6 +28,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 
 describe('TextWidgetComponent', () => {
     const form = new FormModel({ taskId: 'fake-task-id' });
@@ -165,8 +166,17 @@ describe('TextWidgetComponent', () => {
                 const input = await loader.getHarness(MatInputHarness);
                 await (await input.host()).hover();
 
-                const tooltip = await (await input.host()).getAttribute('title');
-                expect(tooltip).toBe('my custom tooltip');
+                const tooltip = await loader.getHarness(MatTooltipHarness);
+                expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+            });
+
+            it('should hide tooltip', async () => {
+                const input = await loader.getHarness(MatInputHarness);
+                await (await input.host()).hover();
+                await (await input.host()).mouseAway();
+
+                const tooltip = await loader.getHarness(MatTooltipHarness);
+                expect(await tooltip.isOpen()).toBe(false);
             });
         });
 

lib/core/src/lib/form/components/widgets/text/text.widget.ts

@@ -22,6 +22,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -44,7 +45,7 @@ import { InputMaskDirective } from './text-mask.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, InputMaskDirective],
+    imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent, InputMaskDirective],
     encapsulation: ViewEncapsulation.None
 })
 export class TextWidgetComponent extends WidgetComponent implements OnInit {

lib/core/src/lib/material.module.ts

@@ -42,70 +42,25 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
     imports: [
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatNativeDateModule,
-        MatOptionModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatMenuModule,
-        MatProgressBarModule,
-        MatSidenavModule,
-        MatSnackBarModule,
-        MatToolbarModule,
-        MatDatetimepickerModule,
-        MatNativeDatetimeModule,
-        MatExpansionModule,
-        MatBadgeModule
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
+        MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
+        MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
+        MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
+        MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
+        MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
     ],
     exports: [
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatNativeDateModule,
-        MatOptionModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatMenuModule,
-        MatProgressBarModule,
-        MatSidenavModule,
-        MatSnackBarModule,
-        MatToolbarModule,
-        MatDatetimepickerModule,
-        MatNativeDatetimeModule,
-        MatExpansionModule,
-        MatBadgeModule
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
+        MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
+        MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
+        MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
+        MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
+        MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
     ]
 })
 export class MaterialModule {}

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -51,7 +51,8 @@
                         <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
                            *ngFor="let message of notification.messages"
                            mat-line
-                           [title]="message">
+                           [matTooltip]="message"
+                           matTooltipShowDelay="{{ 1000 }}">
                             {{ message }}
                         </p>
                         <p class="adf-notification-history-menu-text adf-notification-history-menu-date" mat-line>

lib/core/src/lib/notifications/components/notification-history.component.ts

@@ -29,6 +29,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatListModule } from '@angular/material/list';
 import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
 
 @Component({
@@ -45,6 +46,7 @@ import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
         MatListModule,
         NgIf,
         NgForOf,
+        MatTooltipModule,
         TimeAgoPipe,
         InitialUsernamePipe
     ],