Merge pull request #6041 from IgniteUI/tzhelev/grids-header-title-master

Add title attribute to column header - master

Author: kdinev

CHANGELOG.md

@@ -17,6 +17,8 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
 ## 8.2.4
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - The header text of the columns and the column groups now has the `title` attribute set to it in order to expose a native browser tooltip.
 
 ### RTL Support
 Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes. 

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -20,7 +20,9 @@
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right"></span>
 </ng-container>
 
-<ng-template #defaultColumn>{{column.header}}</ng-template>
+<ng-template #defaultColumn>
+    <span [attr.title]="column.header">{{column.header}}</span>
+</ng-template>
 
 <ng-container *ngIf="!grid.hasColumnLayouts && column.columnGroup">
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html

@@ -1,5 +1,5 @@
 <ng-template #defaultColumn>
-    {{ column.header || column.field }}
+    <span [attr.title]="column.header || column.field">{{ column.header || column.field }}</span>
 </ng-template>
 
 <span class="igx-grid__th-title">