Merge pull request #7789 from IgniteUI/ddincheva/cellTooltip

Add tooltip to the grid data cell and summary cell

Author: rkaraivanov

CHANGELOG.md

@@ -23,6 +23,7 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
+    - Added support for tooltips on data cells default template and summary cells.
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.
     - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)

projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss

@@ -123,7 +123,6 @@
 
         &::after {
             position: absolute;
-            content: '';
             top: 0;
             bottom: 0;
             left: 0;

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -285,6 +285,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         return `${this.row.gridID}_${this.rowIndex}_${ this.visibleColumnIndex}`;
     }
 
+    @HostBinding('attr.title')
+    public get title() {
+        return this.editMode || this.cellTemplate ? '' : this.value;
+    }
+
     /**
      * Returns a reference to the nativeElement of the cell.
      * ```typescript

projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html

@@ -10,8 +10,8 @@
                     </div>
                 </ng-container>
 
-                <span class="igx-grid-summary__label" title="{{ summary.label }}">{{ translateSummary(summary) }}</span>
-                <span class="igx-grid-summary__result" title="{{ summary.summaryResult }}">
+                <span class="igx-grid-summary__label" [attr.title]="summary.label">{{ translateSummary(summary) }}</span>
+                <span class="igx-grid-summary__result" [attr.title]="summary.summaryResult">
                     {{ columnDatatype === 'number' ? (summary.summaryResult | igxdecimal: grid.locale) : columnDatatype === 'date' ? (summary.summaryResult | igxdate: grid.locale) : (summary.summaryResult) }}
                 </span>
             </div>