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

This reverts commit f3a94bdfa44108082089ed21f79e3a466359344b.

demo-shell/src/app/components/search/search-filter-chips.component.html

@@ -12,7 +12,7 @@
                 <adf-search-filter-chips></adf-search-filter-chips>
             </div>
 
-            <mat-icon adf-reset-search title="reset" style="padding-right: 5px;">refresh</mat-icon>
+            <mat-icon adf-reset-search matTooltip="reset" style="padding-right: 5px;">refresh</mat-icon>
 
             <adf-search-sorting-picker style="width: 240px"></adf-search-sorting-picker>
         </div>

e2e-playwright/page-object/components/material/index.ts

@@ -16,3 +16,4 @@
  */
 
 export * from './error.component';
+export * from './validation.component';

e2e-playwright/page-object/components/material/material-locators.ts

@@ -16,7 +16,10 @@
  */
 
 export const materialLocators = {
-    Error: {
+  Error: {
-        root: 'mat-error'
+    root: 'mat-error'
-    }
+  },
+  Tooltip: {
+    root: 'mat-tooltip-component'
+  }
 };

e2e-playwright/page-object/components/material/validation.component.ts

@@ -0,0 +1,29 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+import { materialLocators } from './material-locators';
+
+export class TooltipComponent extends BaseComponent {
+    private static rootElement = materialLocators.Tooltip.root;
+    public content = this.getChild('div');
+
+    constructor(page: Page) {
+        super(page, TooltipComponent.rootElement);
+    }
+}

e2e-playwright/process-services-cloud/components/group.component.ts

@@ -17,11 +17,13 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../../page-object/components/base.component';
-import { ErrorComponent } from '../../page-object/components';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
 
 export class GroupComponent extends BaseComponent {
     private static rootElement = 'adf-cloud-group';
     public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
+    public listbox = new ListboxComponent(this.page);
 
     public groupNaming = this.getChild('[data-automation-id="adf-cloud-group-chip-list"]');
     public groupInput = this.getChild('[data-automation-id="adf-group-cloud-search-input"]');
@@ -31,4 +33,5 @@ export class GroupComponent extends BaseComponent {
     }
 
     public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-cloud-group-chip-${userName}"]`);
+
 }

e2e-playwright/process-services-cloud/components/people.component.ts

@@ -17,11 +17,12 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../../page-object/components/base.component';
-import { ErrorComponent, ListboxComponent } from '../../page-object/components';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
 
 export class PeopleComponent extends BaseComponent {
     private static rootElement = 'adf-cloud-people';
     public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
     public listbox = new ListboxComponent(this.page);
 
     public usersNaming = this.getChild('[data-automation-id="adf-cloud-people-chip-list"]');
@@ -32,4 +33,5 @@ export class PeopleComponent extends BaseComponent {
     }
 
     public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-people-cloud-chip-${userName}"]`);
+
 }

e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts

@@ -39,6 +39,9 @@ test.describe('Groups component stories tests', () => {
 
         await processServicesCloud.navigateTo({ moduleNames: ['group-cloud'], componentName: 'group-cloud', story: 'mandatory-preselected-groups' });
         await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName);
+
+        await groupComponent.getUserLocator('Meat Chicken').hover();
+        await expect(groupComponent.tooltip.content).toContainText('Mandatory');
     });
 
     test('Invalid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
@@ -49,4 +52,5 @@ test.describe('Groups component stories tests', () => {
 
         await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
     });
+
 });

e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts

@@ -42,6 +42,7 @@ test.describe('People component stories tests', () => {
         await peopleComponent.getUserLocator('Kielbasa Sausage').hover();
 
         await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName);
+        await expect(peopleComponent.tooltip.content).toContainText('Mandatory');
     });
 
     test('Invalid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {

lib/content-services/src/lib/aspect-list/aspect-list.component.html

@@ -16,7 +16,7 @@
                 <mat-panel-description
                     class="adf-accordion-aspect-list-expansion-panel-header-description"
                     [id]="'aspect-list-'+colIndex+'-title'"
-                    [title]="getTitle(aspect)">
+                    [matTooltip]="getTitle(aspect)">
                     {{getTitle(aspect)}}
                 </mat-panel-description>
             </mat-expansion-panel-header>

lib/content-services/src/lib/aspect-list/aspect-list.module.ts

@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { AspectListDialogComponent } from './aspect-list-dialog.component';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ContentDirectiveModule } from '../directives/content-directive.module';
 
@@ -39,10 +40,17 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
         TranslateModule,
         MatDialogModule,
         MatButtonModule,
+        MatTooltipModule,
         MatProgressSpinnerModule,
         ContentDirectiveModule
     ],
-    exports: [AspectListComponent, AspectListDialogComponent],
+    exports: [
-    declarations: [AspectListComponent, AspectListDialogComponent]
+        AspectListComponent,
+        AspectListDialogComponent
+    ],
+    declarations: [
+        AspectListComponent,
+        AspectListDialogComponent
+    ]
 })
-export class AspectListModule {}
+export class AspectListModule { }

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -25,7 +25,7 @@
                         {{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
                         <mat-icon *ngIf="hasUploadError()"
                                   data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
-                                  title="{{ getWarningMessage() | translate }}">info
+                                  matTooltip="{{ getWarningMessage() | translate }}">info
                         </mat-icon>
                     </ng-template>
                 </div>

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -334,12 +334,12 @@ describe('ContentNodeSelectorComponent', () => {
 
             fixture.detectChanges();
             const infoMatIcon = getTabInfoButton();
-            const iconTooltipMessage = infoMatIcon.attributes['title'];
+            const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
 
             const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE';
 
             expect(component.getWarningMessage()).toEqual(expectedMessage);
-            expect(iconTooltipMessage).toEqual(expectedMessage);
+            expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
         });
 
         it('should not be able to show warning message if it is not in search mode', () => {
@@ -394,11 +394,11 @@ describe('ContentNodeSelectorComponent', () => {
 
             fixture.detectChanges();
             const infoMatIcon = getTabInfoButton();
-            const iconTooltipMessage = infoMatIcon.attributes['title'];
+            const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
             const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE';
 
             expect(component.getWarningMessage()).toEqual(expectedMessage);
-            expect(iconTooltipMessage).toEqual(expectedMessage);
+            expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
         });
 
         it('should not be able to show warning message while loading documents', () => {

lib/content-services/src/lib/dialogs/node-lock.dialog.html

@@ -5,13 +5,13 @@
 <mat-dialog-content>
     <br />
     <form [formGroup]="form" (submit)="submit()">
-        <mat-checkbox  data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" [title]="nodeName" [formControlName]="'isLocked'" ngDefaultControl>
+        <mat-checkbox  data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ nodeName }}" [formControlName]="'isLocked'" ngDefaultControl>
             {{ 'CORE.FILE_DIALOG.FILE_LOCK_CHECKBOX' | translate }} <strong>"{{ nodeName }}"</strong>
         </mat-checkbox>
 
         <br />
 
-        <div *ngIf="form.value?.isLocked">
+        <div *ngIf="form.value.isLocked">
             <mat-checkbox class="adf-lock-file-name" [formControlName]="'allowOwner'" ngDefaultControl>
                 {{ 'CORE.FILE_DIALOG.ALLOW_OTHERS_CHECKBOX' | translate }}
             </mat-checkbox>
@@ -24,7 +24,7 @@
 
             <br />
 
-            <mat-form-field *ngIf="form.value?.isTimeLock">
+            <mat-form-field *ngIf="form.value.isTimeLock">
                 <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
                 <mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1"></mat-datetimepicker>
                 <input matInput [formControlName]="'time'" [matDatetimepicker]="datetimePicker" required autocomplete="false">

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html

@@ -8,7 +8,9 @@
         [attr.aria-label]="option.name | translate"
         (change)="changeHandler($event, option)"
         class="adf-facet-filter">
-        <div title="{{ option.name | translate }}" class="adf-search-check-list-label">
+        <div matTooltip="{{ option.name | translate }}"
+            matTooltipPosition="before"
+            class="adf-search-check-list-label">
             {{ option.name | translate }}
         </div>
 

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html

@@ -4,11 +4,14 @@
             class="adf-option-chips adf-autocomplete-added-option-chips"
             *ngFor="let option of selectedOptions"
             (removed)="remove(option)">
-            <span [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}) : undefined">
+            <span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
+                  [matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
                 {{ option.value }}
             </span>
-            <button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button"
+            <button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
-                    [title]="'SEARCH.FILTER.BUTTONS.REMOVE' | translate">
+                    [matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
+                    [matTooltipShowDelay]="tooltipShowDelay"
+                    [attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
                 <mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
             </button>
         </mat-chip>
@@ -30,9 +33,10 @@
         <ng-container *ngIf="optionInput.value.length > 0">
             <mat-option
                 [disabled]="option | adfIsIncluded: selectedOptions : compareOption"
-                *ngFor="let option of filteredOptions" [value]="option"
+                *ngFor="let option of filteredOptions" [value]="option" [matTooltipShowDelay]="tooltipShowDelay"
+                [matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
                 [attr.data-automation-id]="'option-' + (option.value)"
-                [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}): undefined"
+                [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
                 class="adf-search-chip-autocomplete-added-option"
                 [ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
                 {{ option.fullPath || option.value }}

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts

@@ -67,7 +67,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
     @Input()
     filter = (options: AutocompleteOption[], value: string): AutocompleteOption[] => {
         const filterValue = value.toLowerCase();
-        return options.filter((option) => option.value.toLowerCase().includes(filterValue)).slice(0, 15);
+        return options.filter(option => option.value.toLowerCase().includes(filterValue)).slice(0, 15);
     };
 
     @Output()
@@ -80,6 +80,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
     formCtrl = new FormControl('');
     filteredOptions: AutocompleteOption[] = [];
     selectedOptions: AutocompleteOption[] = [];
+    tooltipShowDelay = 800;
     private onDestroy$ = new Subject<void>();
     private _activeAnyOption = false;
 
@@ -91,7 +92,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
         this.formCtrl.valueChanges
             .pipe(
                 startWith(''),
-                tap(() => (this.activeAnyOption = false)),
+                tap(() => this.activeAnyOption = false),
                 debounce((value: string) => (value ? timer(300) : EMPTY)),
                 takeUntil(this.onDestroy$)
             )
@@ -104,10 +105,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.autocompleteOptions) {
-            this.filteredOptions =
+            this.filteredOptions = changes.autocompleteOptions.currentValue?.length > 0 ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value) : [];
-                changes.autocompleteOptions.currentValue?.length > 0
-                    ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value)
-                    : [];
         }
     }
 
@@ -125,10 +123,10 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
 
             if (value && this.isExists(value) && !this.isAdded(value)) {
                 if (this.allowOnlyPredefinedValues) {
-                    const index = this.autocompleteOptions.findIndex((option) => option.value.toLowerCase() === value.toLowerCase());
+                    const index = this.autocompleteOptions.findIndex(option => option.value.toLowerCase() === value.toLowerCase());
                     this.selectedOptions.push(this.autocompleteOptions[index]);
                 } else {
-                    this.selectedOptions.push({ value });
+                    this.selectedOptions.push({value});
                 }
                 this.optionsChanged.emit(this.selectedOptions);
                 event.chipInput.clear();
@@ -155,12 +153,14 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
 
     private isAdded(value: string): boolean {
         const valueLowerCase = value.toLowerCase();
-        return this.selectedOptions.some((option) => option.value.toLowerCase() === valueLowerCase);
+        return this.selectedOptions.some(option => option.value.toLowerCase() === valueLowerCase);
     }
 
     private isExists(value: string): boolean {
         const valueLowerCase = value.toLowerCase();
-        return this.allowOnlyPredefinedValues ? this.autocompleteOptions.some((option) => option.value.toLowerCase() === valueLowerCase) : true;
+        return this.allowOnlyPredefinedValues
+            ? this.autocompleteOptions.some(option => option.value.toLowerCase() === valueLowerCase)
+            : true;
     }
 
     private reset() {

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html

@@ -5,7 +5,8 @@
             color="primary"
             selected
             class="adf-search-chip-list-item"
-            title="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
+            matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
+            matTooltipPosition="right"
             (click)="facetFiltersService.resetAllSelectedBuckets()">
             {{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }}
         </mat-chip>

lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html

@@ -34,7 +34,8 @@
             class="adf-search-filter-facet-checkbox"
         >
             <div
-                title="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
+                matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
+                matTooltipPosition="right"
                 class="adf-facet-label"
                 [class.adf-search-filter-facet-checkbox-checked]="bucket.checked"
             >

lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html

@@ -4,8 +4,9 @@
         <button mat-icon-button
             class="adf-search-filter-title-action"
             aria-hidden="false"
+            [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
             (click)="onClose()"
-            [title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
+            [matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
             <mat-icon>
                 close
             </mat-icon>

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html

@@ -9,7 +9,7 @@
         (keyup.enter)="$event.stopPropagation()"
         class="adf-filter-button"
         [attr.aria-label]="getTooltipTranslation(col?.title)"
-        [title]="getTooltipTranslation(col?.title)"
+        [matTooltip]="getTooltipTranslation(col?.title)"
     >
         <adf-icon
             value="filter_list"

lib/content-services/src/lib/search/components/search-filter/search-filter.component.html

@@ -3,7 +3,8 @@
     <button *ngIf="displayResetButton && facetFiltersService.responseFacets"
             mat-button
             color="primary"
-            title="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
+            matTooltip="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
+            matTooltipPosition="right"
             adf-reset-search>
         {{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.LABEL' | translate }}
     </button>
@@ -16,7 +17,7 @@
                 {{ category.name | translate }}
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <adf-search-filter-card
+        <adf-search-filter-card 
             [category]="category">
         </adf-search-filter-card>
     </mat-expansion-panel>

lib/content-services/src/lib/search/components/search-radio/search-radio.component.html

@@ -6,7 +6,10 @@
         *ngFor="let option of options"
         [value]="option.value"
         class="adf-facet-filter">
-        <div title="{{ option.name | translate }}" class="adf-filter-label">
+        <div
+            matTooltip="{{ option.name | translate }}"
+            matTooltipPosition="right"
+            class="adf-filter-label">
             {{ option.name | translate }}
         </div>
     </mat-radio-button>

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 {
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, TemplateRef, ViewChildren } from '@angular/core';
-    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>) {
+    private mapToTemplateRefs( breadcrumbItems: QueryList<BreadcrumbItemComponent> ) {
-        return breadcrumbItems.toArray().map((breadcrumbItem) => breadcrumbItem.templateRef);
+        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');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toBe('my custom tooltip');
+            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"
+                  [matTooltip]="field.tooltip"
-                  (click)="markAsTouched()">
+                  (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');
+                const tooltip = await loader.getHarness(MatTooltipHarness);
-                expect(tooltip).toBe('my custom tooltip');
+                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');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toBe('my custom tooltip');
+            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"
+                   [matTooltip]="field.tooltip"
-                   (blur)="markAsTouched()" />
+                   (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');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toBe('my custom tooltip');
+            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"
+                  [matTooltip]="field.tooltip"
-                  (blur)="markAsTouched()">
+                  (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');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toBe('my custom tooltip');
+            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"
+                   [matTooltip]="field.tooltip"
-                   (blur)="markAsTouched()">
+                   (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');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toBe('my custom tooltip');
+            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"
+                   [matTooltip]="field.tooltip"
-                   (blur)="markAsTouched()">
+                   (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');
+                const tooltip = await loader.getHarness(MatTooltipHarness);
-                expect(tooltip).toBe('my custom tooltip');
+                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,
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
-        MatButtonModule,
+        MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
-        MatCardModule,
+        MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
-        MatCheckboxModule,
+        MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
-        MatChipsModule,
+        MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
-        MatDatepickerModule,
+        MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
-        MatDialogModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatNativeDateModule,
-        MatOptionModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatMenuModule,
-        MatProgressBarModule,
-        MatSidenavModule,
-        MatSnackBarModule,
-        MatToolbarModule,
-        MatDatetimepickerModule,
-        MatNativeDatetimeModule,
-        MatExpansionModule,
-        MatBadgeModule
     ],
     exports: [
-        MatAutocompleteModule,
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
-        MatButtonModule,
+        MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
-        MatCardModule,
+        MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
-        MatCheckboxModule,
+        MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
-        MatChipsModule,
+        MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
-        MatDatepickerModule,
+        MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
-        MatDialogModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatNativeDateModule,
-        MatOptionModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatMenuModule,
-        MatProgressBarModule,
-        MatSidenavModule,
-        MatSnackBarModule,
-        MatToolbarModule,
-        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
     ],

lib/insights/src/lib/analytics-process/components/analytics-generator.component.html

@@ -3,7 +3,7 @@
         <button
             mat-icon-button
             *ngFor="let report of reports; let idx = index"
-            [title]="report.title"
+            [matTooltip]="report.title"
             [color]="isCurrent(idx) ? 'primary' : null"
             (click)="selectCurrent(idx)"
         >

lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts

@@ -21,6 +21,7 @@ import { Chart } from '../../diagram/models/chart/chart.model';
 import { AnalyticsService } from '../services/analytics.service';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
 import { NgChartsModule } from 'ng2-charts';
 import { TranslateModule } from '@ngx-translate/core';
@@ -34,6 +35,7 @@ import { AnalyticsReportHeatMapComponent } from './analytics-report-heat-map.com
     imports: [
         CommonModule,
         MatButtonModule,
+        MatTooltipModule,
         MatIconModule,
         NgChartsModule,
         TranslateModule,

lib/process-services-cloud/src/lib/form/components/form-cloud.component.html

@@ -10,7 +10,7 @@
 
         <adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayMode === 'fullScreen' && findDisplayConfiguration('fullScreen')?.options?.displayToolbar">
             <div class="adf-cloud-form__form-title">
-                <span class="adf-cloud-form__display-name" [title]="form.taskName">
+                <span class="adf-cloud-form__display-name" [matTooltip]="form.taskName">
                     {{form.taskName}}
                     <ng-container *ngIf="!form.taskName">
                         {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
@@ -23,7 +23,7 @@
                         data-automation-id="adf-toolbar-right-back"
                         [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
                         [attr.data-automation-id]="'adf-cloud-form-close-button'"
-                        [title]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
+                        [matTooltip]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
                         mat-icon-button
                         title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
                         (click)="switchToDisplayMode()">
@@ -48,12 +48,12 @@
                                 <mat-icon>fullscreen</mat-icon>
                             </button>
                         </div>
-                        <div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [title]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
+                        <div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [matTooltip]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
                             <button mat-icon-button (click)="onRefreshClicked()" [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
                                 <mat-icon>refresh</mat-icon>
                             </button>
                         </div>
-                        <span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName">
+                        <span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [matTooltip]="form.taskName">
                             {{form.taskName}}
                             <ng-container *ngIf="!form.taskName">
                                 {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html

@@ -12,7 +12,9 @@
                     class="adf-attach-widget__menu-upload__button"
                     color="primary"
                     [id]="field.id"
-                    [title]="field.tooltip">
+                    [matTooltip]="field.tooltip"
+                    matTooltipPosition="above"
+                    matTooltipShowDelay="1000">
                         {{ 'FORM.FIELD.ATTACH' | translate }}
                         <mat-icon class="adf-attach-widget__menu-upload__button__icon">{{getWidgetIcon()}}</mat-icon>
                 </button>

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts

@@ -71,6 +71,9 @@ import {
 import { By } from '@angular/platform-browser';
 import { of, throwError } from 'rxjs';
 import { FormCloudModule } from '../../../form-cloud.module';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 
 const mockNodeToBeVersioned: any = {
     isFile: true,
@@ -122,6 +125,7 @@ describe('AttachFileCloudWidgetComponent', () => {
     let localizedDataPipe: LocalizedDatePipe;
     let newVersionUploaderService: NewVersionUploaderService;
     let notificationService: NotificationService;
+    let loader: HarnessLoader;
 
     const createUploadWidgetField = (
         form: FormModel,
@@ -165,6 +169,7 @@ describe('AttachFileCloudWidgetComponent', () => {
         contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService);
         openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeNode]));
         localizedDataPipe = new LocalizedDatePipe();
+        loader = TestbedHarnessEnvironment.loader(fixture);
     });
 
     afterEach(() => {
@@ -921,4 +926,37 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(spyOnShowError).toHaveBeenCalledWith(mockError.value);
         });
     });
+
+    describe('when tooltip is set', () => {
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.UPLOAD,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const attachButton = fixture.nativeElement.querySelector('button');
+            attachButton.dispatchEvent(new Event('mouseenter'));
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+
+            expect(await tooltipElement.isOpen()).toBeTrue();
+            expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const attachButton = fixture.nativeElement.querySelector('.adf-attach-widget__menu-upload__button');
+            attachButton.dispatchEvent(new Event('mouseenter'));
+            fixture.detectChanges();
+
+            attachButton.dispatchEvent(new Event('mouseleave'));
+            fixture.detectChanges();
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+
+            expect(await tooltipElement.isOpen()).toBeFalse();
+        });
+    });
 });

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html

@@ -20,7 +20,8 @@
         </div>
 
         <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
-            <button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
+            <button mat-raised-button color="primary" (click)="uploadFiles.click()" [matTooltip]="field.tooltip"
+                matTooltipPosition="above" matTooltipShowDelay="1000">
                 {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
                 <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId"
                     (change)="onFileChanged($event)" />

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -15,7 +15,9 @@
                 [min]="minDate"
                 [max]="maxDate"
                 [disabled]="field.readOnly"
-                [title]="field.tooltip"
+                [matTooltip]="field.tooltip"
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000"
                 (dateChange)="onDateChanged($event)"
                 (blur)="markAsTouched()">
             <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly"></mat-datepicker-toggle>

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -21,6 +21,10 @@ import { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateF
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { DateAdapter } from '@angular/material/core';
 import { isEqual, subDays, addDays } from 'date-fns';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
+import { MatInputHarness } from '@angular/material/input/testing';
 
 describe('DateWidgetComponent', () => {
     let widget: DateCloudWidgetComponent;
@@ -28,6 +32,7 @@ describe('DateWidgetComponent', () => {
     let element: HTMLElement;
     let adapter: DateAdapter<Date>;
     let form: FormModel;
+    let loader: HarnessLoader;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -42,6 +47,7 @@ describe('DateWidgetComponent', () => {
 
         widget = fixture.componentInstance;
         element = fixture.nativeElement;
+        loader = TestbedHarnessEnvironment.loader(fixture);
     });
 
     it('should setup min value for date picker', () => {
@@ -427,6 +433,34 @@ describe('DateWidgetComponent', () => {
         });
     });
 
+    describe('when tooltip is set', () => {
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.DATE,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const dateCloudInput = await loader.getHarness(MatInputHarness);
+            await (await dateCloudInput.host()).dispatchEvent('mouseenter');
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltipElement.isOpen()).toBeTruthy();
+            expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const dateCloudInput = await loader.getHarness(MatInputHarness);
+            await (await dateCloudInput.host()).dispatchEvent('mouseenter');
+            await (await dateCloudInput.host()).dispatchEvent('mouseleave');
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltipElement.isOpen()).toBeFalsy();
+        });
+    });
+
     describe('when is required', () => {
         beforeEach(() => {
             widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -16,10 +16,12 @@
                         [disabled]="field.readOnly"
                         [compareWith]="compareDropdownValues"
                         (ngModelChange)="selectionChangedForField(field)"
-                        [title]="field.tooltip"
+                        [matTooltip]="field.tooltip"
                         [required]="isRequired()"
                         panelClass="adf-select-filter"
                         (blur)="markAsTouched()"
+                        matTooltipPosition="above"
+                        matTooltipShowDelay="1000"
                         [multiple]="field.hasMultipleValues">
                 <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>
 

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -37,6 +37,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatSelectHarness } from '@angular/material/select/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 
 describe('DropdownCloudWidgetComponent', () => {
     let formService: FormService;
@@ -258,6 +259,38 @@ describe('DropdownCloudWidgetComponent', () => {
         });
     });
 
+    describe('when tooltip is set', () => {
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.DROPDOWN,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
+            const dropdownInput = await dropdown.host();
+            dropdownInput.dispatchEvent('mouseenter');
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+            expect(tooltipElement).toBeTruthy();
+            expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip');
+            expect(await tooltipElement.isOpen()).toBeTruthy();
+        });
+
+        it('should hide tooltip', async () => {
+            const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
+            const dropdownInput = await dropdown.host();
+            await dropdownInput.dispatchEvent('mouseenter');
+
+            await dropdownInput.dispatchEvent('mouseleave');
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltipElement.isOpen()).toBeFalsy();
+        });
+    });
+
     describe('when is required', () => {
         beforeEach(() => {
             widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html

@@ -15,7 +15,9 @@
                 (changedGroups)="onChangedGroup($event)"
                 [preSelectGroups]="preSelectGroup"
                 (blur)="markAsTouched()"
-                [attr.title]="field.tooltip">
+                [matTooltip]="field.tooltip"
+                [matTooltipPosition]="'above'"
+                [matTooltipShowDelay]="1000">
         </adf-cloud-group>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts

@@ -22,6 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { MatChipHarness } from '@angular/material/chips/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
@@ -73,8 +74,23 @@ describe('GroupCloudWidgetComponent', () => {
             await fixture.whenStable();
             fixture.detectChanges();
 
-            const tooltip = cloudGroupInput.getAttribute('title');
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toEqual('my custom tooltip');
+            expect(await tooltipElement.isOpen()).toBeTruthy();
+            expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const cloudGroupInput = element.querySelector('[data-automation-id="adf-cloud-group-search-input"]');
+            cloudGroupInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            cloudGroupInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltipElement.isOpen()).toBeFalsy();
         });
     });
 
@@ -151,8 +167,8 @@ describe('GroupCloudWidgetComponent', () => {
             const formField = await loader.getHarness(MatFormFieldHarness);
             expect(await formField.isDisabled()).toBeTrue();
 
-            const groupChip = await loader.getHarness(MatChipHarness);
+            const gtoupChip = await loader.getHarness(MatChipHarness);
-            expect(await groupChip.isDisabled()).toBeTrue();
+            expect(await gtoupChip.isDisabled()).toBeTrue();
         });
 
         it('should multi chips be disabled', async () => {

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html

@@ -17,7 +17,9 @@
                 [mode]="mode"
                 [groupsRestriction]="groupsRestriction"
                 (blur)="markAsTouched()"
-                [attr.title]="field.tooltip">
+                [matTooltip]="field.tooltip"
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000">
             </adf-cloud-people>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts

@@ -24,6 +24,7 @@ import { IdentityUserService } from '../../../../people/services/identity-user.s
 import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 import { MatChipHarness } from '@angular/material/chips/testing';
 
@@ -101,8 +102,23 @@ describe('PeopleCloudWidgetComponent', () => {
             await fixture.whenStable();
             fixture.detectChanges();
 
-            const tooltip = cloudPeopleInput.getAttribute('title');
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toEqual('my custom tooltip');
+            expect(await tooltipElement.isOpen()).toBeTruthy();
+            expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const cloudPeopleInput = element.querySelector('adf-cloud-people');
+            cloudPeopleInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            cloudPeopleInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+            expect(await tooltipElement.isOpen()).toBeFalsy();
         });
     });
 

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html

@@ -4,7 +4,9 @@
         <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
         <mat-radio-group [ngClass]="(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'" class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
             <mat-radio-button
-                [title]="field.tooltip"
+                [matTooltip]="field.tooltip"
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000"
                 [id]="field.id + '-' + opt.id"
                 [name]="field.id"
                 [value]="opt.id"

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts

@@ -24,6 +24,7 @@ import { of, throwError } from 'rxjs';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 
 describe('RadioButtonsCloudWidgetComponent', () => {
     let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
@@ -218,8 +219,19 @@ describe('RadioButtonsCloudWidgetComponent', () => {
         it('should show tooltip', async () => {
             const radioButton = await loader.getHarness(MatRadioButtonHarness);
             await (await radioButton.host()).hover();
-            const tooltip = await (await radioButton.host()).getAttribute('title');
+            const tooltip = await loader.getHarness(MatTooltipHarness);
-            expect(tooltip).toBe('my custom tooltip');
+            expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
+        });
+
+        it('should hide tooltip', async () => {
+            const radioButton = await loader.getHarness(MatRadioButtonHarness);
+            const tooltipElement = await loader.getHarness(MatTooltipHarness);
+
+            await (await radioButton.host()).hover();
+            expect(await tooltipElement.isOpen()).toBeTrue();
+
+            await (await radioButton.host()).mouseAway();
+            expect(await tooltipElement.isOpen()).toBeFalse();
         });
     });
 });

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -8,7 +8,7 @@
                 [removable]="!(group.readonly)"
                 [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
                 (removed)="onRemove(group)"
-                title="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
+                matTooltip="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{group.name}}
                 <mat-icon
                     *ngIf="!(group.readonly || readOnly)"

lib/process-services-cloud/src/lib/material.module.ts

@@ -37,56 +37,25 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
-    providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }],
+    providers: [
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
+    ],
     imports: [
-        MatAutocompleteModule,
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,
-        MatButtonModule,
+        MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
-        MatCardModule,
+        MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
-        MatDialogModule,
+        MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
-        MatCheckboxModule,
+        MatChipsModule, MatMenuModule, MatExpansionModule
-        MatDatepickerModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatOptionModule,
-        MatRadioModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatProgressSpinnerModule,
-        MatNativeDateModule,
-        MatRippleModule,
-        MatChipsModule,
-        MatMenuModule,
-        MatExpansionModule
     ],
     exports: [
-        MatAutocompleteModule,
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,
-        MatButtonModule,
+        MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
-        MatCardModule,
+        MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
-        MatDialogModule,
+        MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
-        MatCheckboxModule,
+        MatChipsModule, MatMenuModule, MatExpansionModule
-        MatDatepickerModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatOptionModule,
-        MatRadioModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatProgressSpinnerModule,
-        MatNativeDateModule,
-        MatRippleModule,
-        MatChipsModule,
-        MatMenuModule,
-        MatExpansionModule
     ]
 })
 export class MaterialModule {}

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -8,7 +8,7 @@
                 [removable]="!(user.readonly)"
                 [attr.data-automation-id]="'adf-people-cloud-chip-' + user.username"
                 (removed)="onRemove(user)"
-                title="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
+                matTooltip="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{user | fullName}}
                 <mat-icon
                     matChipRemove

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html

@@ -8,7 +8,7 @@
                     <span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">
-                            <button *ngFor="let filterAction of processFilterActions" mat-icon-button title="{{ filterAction.tooltip | translate}}" [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType" [disabled]="isDisabledAction(filterAction)" (click)="executeFilterActions($event, filterAction)">
+                            <button *ngFor="let filterAction of processFilterActions" mat-icon-button matTooltip="{{ filterAction.tooltip | translate}}" [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType" [disabled]="isDisabledAction(filterAction)" (click)="executeFilterActions($event, filterAction)">
                                 <adf-icon [value]="filterAction.icon"></adf-icon>
                             </button>
                         </ng-container>

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html

@@ -10,7 +10,7 @@
                         <ng-container *ngIf="toggleFilterActions">
                             <button *ngFor="let filterAction of taskFilterActions"
                                     mat-icon-button
-                                    title="{{ filterAction.tooltip | translate}}"
+                                    matTooltip="{{ filterAction.tooltip | translate}}"
                                     [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
                                     [disabled]="isDisabledAction(filterAction)"
                                     (click)="executeFilterActions(filterAction)">

lib/process-services/src/lib/form/form.component.html

@@ -20,7 +20,7 @@
                             <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <span *ngIf="isTitleEnabled()" class="adf-form-title" [title]="form.taskName">
+                    <span *ngIf="isTitleEnabled()" class="adf-form-title" [matTooltip]="form.taskName">
                         {{form.taskName}}
                         <ng-container *ngIf="!form.taskName">
                             {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}

lib/process-services/src/lib/form/form.component.ts

@@ -45,12 +45,13 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-form',
     standalone: true,
-    imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
+    imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
     templateUrl: './form.component.html',
     encapsulation: ViewEncapsulation.None
 })

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html

@@ -72,7 +72,7 @@
                 matLine
                 id="{{ 'file-' + file.id }}"
                 (click)="onAttachFileClicked(file)"
-                [title]="file.name"
+                [matTooltip]="file.name"
                 (keyup.enter)="onAttachFileClicked(file)"
                 tabindex="0"
                 role="button"

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts

@@ -33,11 +33,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'attach-widget',
     standalone: true,
-    imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, ErrorWidgetComponent],
+    imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, MatTooltipModule, ErrorWidgetComponent],
     templateUrl: './attach-file-widget.component.html',
     styleUrls: ['./attach-file-widget.component.scss'],
     host: {

lib/process-services/src/lib/form/widgets/people/people.widget.html

@@ -14,7 +14,9 @@
                [placeholder]="field.placeholder"
                [matAutocomplete]="auto"
                (blur)="markAsTouched()"
-               [title]="field.tooltip">
+               [matTooltip]="field.tooltip"
+               matTooltipPosition="above"
+               matTooltipShowDelay="1000">
         <mat-autocomplete class="adf-people-widget-list"
                           #auto="matAutocomplete"
                           (optionSelected)="onItemSelect($event.option.value)"

lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts

@@ -293,7 +293,7 @@ describe('PeopleWidgetComponent', () => {
             await fixture.whenStable();
 
             const radioButtonsElement: any = element.querySelector('#people-id');
-            const tooltip = radioButtonsElement.getAttribute('title');
+            const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
 
             expect(tooltip).toEqual(widget.field.tooltip);
         });

lib/process-services/src/lib/form/widgets/people/people.widget.ts

@@ -29,6 +29,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'people-widget',
@@ -40,6 +41,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
         MatInputModule,
         ReactiveFormsModule,
         MatAutocompleteModule,
+        MatTooltipModule,
         InitialUsernamePipe,
         ErrorWidgetComponent
     ],

lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html

@@ -4,7 +4,9 @@
         <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
         <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
             <mat-radio-button
-                [title]="field.tooltip"
+                [matTooltip]="field.tooltip"
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000"
                 [id]="field.id + '-' + opt.id"
                 [name]="field.id"
                 [value]="opt.id"

lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.spec.ts

@@ -27,6 +27,7 @@ import { ProcessDefinitionService } from '../../services/process-definition.serv
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
 
 describe('RadioButtonsWidgetComponent', () => {
     let formService: FormService;
@@ -241,9 +242,9 @@ describe('RadioButtonsWidgetComponent', () => {
 
             fixture.detectChanges();
 
-            const option = await loader.getHarness(MatRadioButtonHarness.with({ selector: '#radio-id-opt-1' }));
+            const tooltip = await loader.getHarness(MatTooltipHarness.with({ selector: '#radio-id-opt-1' }));
-            const tooltip = await (await option.host()).getAttribute('title');
+            await tooltip.show();
-            expect(tooltip).toEqual(radioButtonWidget.field.tooltip);
+            expect(await tooltip.getTooltipText()).toEqual(radioButtonWidget.field.tooltip);
         });
 
         describe('and radioButton is populated via taskId', () => {

lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts

@@ -25,11 +25,12 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatRadioModule } from '@angular/material/radio';
 import { FormsModule } from '@angular/forms';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'radio-buttons-widget',
     standalone: true,
-    imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, ErrorWidgetComponent],
+    imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
     templateUrl: './radio-buttons.widget.html',
     styleUrls: ['./radio-buttons.widget.scss'],
     host: {

lib/process-services/src/lib/task-list/components/checklist/checklist.component.html

@@ -5,7 +5,7 @@
     </mat-chip-list>
 
 
-    <button mat-icon-button *ngIf="!readOnly" title="Add a checklist"
+    <button mat-icon-button *ngIf="!readOnly" matTooltip="Add a checklist" [matTooltipPosition]="'before'"
             id="add-checklist" class="adf-add-to-checklist-button" (click)="showDialog()">
         <mat-icon>add</mat-icon>
     </button>

lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts

@@ -23,6 +23,7 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -36,6 +37,7 @@ import { FormsModule } from '@angular/forms';
         TranslateModule,
         MatChipsModule,
         MatButtonModule,
+        MatTooltipModule,
         MatIconModule,
         MatDialogModule,
         MatFormFieldModule,