Components / Tooltip / How To

Render Tooltips for Grid Cells

You can show the content of a Grid cell in a tooltip which will be displayed when the user hovers over that cell.

  1. Use the Tooltip template to display the content of its anchor elements.

    <ng-template #template let-anchor>
       <span>{{ anchor.nativeElement.innerText }}</span>
   </ng-template>

  2. Set showOn to none and toggle the Tooltip programmatically.

    <div kendoTooltip
       showOn="'none'"
       [tooltipTemplate]="template"
       filter=".k-grid td"
       (mouseover)="showTooltip($event)">
   ...
    public showTooltip(e): void {
       if(e.target.offsetWidth < e.target.scrollWidth) {
           this.tooltipDir.toggle(e.target);
       } else {
           this.tooltipDir.hide();
       }
   }

The following example demonstrates the full implementation of the approach.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { products } from './products';

import { TooltipDirective } from '@progress/kendo-angular-tooltip';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template let-anchor>
      <span>{{ anchor.nativeElement.innerText }}</span>
    </ng-template>
   <div kendoTooltip
      showOn="none"
      [tooltipTemplate]="template"
      filter=".k-grid td"
      (mouseover)="showTooltip($event)">
    <kendo-grid [kendoGridBinding]="gridData" [pageSize]="5" [pageable]="true" [resizable]="true">
        <kendo-grid-column field="ProductID" title="ID" width="40">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Name" width="150">
        </kendo-grid-column>
        <kendo-grid-column field="Category.CategoryName" title="Category">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Price" width="80">
        </kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
        </kendo-grid-column>
        <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
            <ng-template kendoGridCellTemplate let-dataItem>
                <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-grid .k-grid-content td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  `]
})
export class AppComponent {
    @ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;
    public gridData: any[] = products;

    public showTooltip(e: any): void {
      if (e.target.offsetWidth < e.target.scrollWidth) {
        this.tooltipDir.toggle(e.target);
      } else {
        this.tooltipDir.hide();
      }
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { TooltipModule } from '@progress/kendo-angular-tooltip';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, GridModule, TooltipModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

export const products = [{
    'ProductID': 1,
    'ProductName': 'Chai',
    'SupplierID': 1,
    'CategoryID': 1,
    'QuantityPerUnit': '10 boxes x 20 bags',
    'UnitPrice': 18.0000,
    'UnitsInStock': 39,
    'UnitsOnOrder': 0,
    'ReorderLevel': 10,
    'Discontinued': false,
    'Category': {
        'CategoryID': 1,
        'CategoryName': 'Beverages',
        'Description': 'Soft drinks, coffees, teas, beers, and ales'
    }
}, {
    'ProductID': 2,
    'ProductName': 'Chang',
    'SupplierID': 1,
    'CategoryID': 1,
    'QuantityPerUnit': '24 - 12 oz bottles',
    'UnitPrice': 19.0000,
    'UnitsInStock': 17,
    'UnitsOnOrder': 40,
    'ReorderLevel': 25,
    'Discontinued': false,
    'Category': {
        'CategoryID': 1,
        'CategoryName': 'Beverages',
        'Description': 'Soft drinks, coffees, teas, beers, and ales'
    }
}, {
    'ProductID': 3,
    'ProductName': 'Aniseed Syrup',
    'SupplierID': 1,
    'CategoryID': 2,
    'QuantityPerUnit': '12 - 550 ml bottles',
    'UnitPrice': 10.0000,
    'UnitsInStock': 13,
    'UnitsOnOrder': 70,
    'ReorderLevel': 25,
    'Discontinued': false,
    'Category': {
        'CategoryID': 2,
        'CategoryName': 'Condiments',
        'Description': 'Sweet and savory sauces, relishes, spreads, and seasonings'
    }
}, {
    'ProductID': 4,
    'ProductName': 'Chef Anton Cajun Seasoning',
    'SupplierID': 2,
    'CategoryID': 2,
    'QuantityPerUnit': '48 - 6 oz jars',
    'UnitPrice': 22.0000,
    'UnitsInStock': 53,
    'UnitsOnOrder': 0,
    'ReorderLevel': 0,
    'Discontinued': false,
    'Category': {
        'CategoryID': 2,
        'CategoryName': 'Condiments',
        'Description': 'Sweet and savory sauces, relishes, spreads, and seasonings'
    }
}, {
    'ProductID': 5,
    'ProductName': 'Chef Anton Gumbo Mix',
    'SupplierID': 2,
    'CategoryID': 2,
    'QuantityPerUnit': '36 boxes',
    'UnitPrice': 21.3500,
    'UnitsInStock': 0,
    'UnitsOnOrder': 0,
    'ReorderLevel': 0,
    'Discontinued': true,
    'Category': {
        'CategoryID': 2,
        'CategoryName': 'Condiments',
        'Description': 'Sweet and savory sauces, relishes, spreads, and seasonings'
    }
}, {
    'ProductID': 6,
    'ProductName': 'Grandma Boysenberry Spread',
    'SupplierID': 3,
    'CategoryID': 2,
    'QuantityPerUnit': '12 - 8 oz jars',
    'UnitPrice': 25.0000,
    'UnitsInStock': 120,
    'UnitsOnOrder': 0,
    'ReorderLevel': 25,
    'Discontinued': false,
    'Category': {
        'CategoryID': 2,
        'CategoryName': 'Condiments',
        'Description': 'Sweet and savory sauces, relishes, spreads, and seasonings'
    }
}, {
    'ProductID': 7,
    'ProductName': 'Uncle Bob Organic Dried Pears',
    'SupplierID': 3,
    'CategoryID': 7,
    'QuantityPerUnit': '12 - 1 lb pkgs.',
    'UnitPrice': 30.0000,
    'UnitsInStock': 15,
    'UnitsOnOrder': 0,
    'ReorderLevel': 10,
    'Discontinued': false,
    'Category': {
        'CategoryID': 7,
        'CategoryName': 'Produce',
        'Description': 'Dried fruit and bean curd'
    }
}, {
    'ProductID': 8,
    'ProductName': 'Northwoods Cranberry Sauce',
    'SupplierID': 3,
    'CategoryID': 2,
    'QuantityPerUnit': '12 - 12 oz jars',
    'UnitPrice': 40.0000,
    'UnitsInStock': 6,
    'UnitsOnOrder': 0,
    'ReorderLevel': 0,
    'Discontinued': false,
    'Category': {
        'CategoryID': 2,
        'CategoryName': 'Condiments',
        'Description': 'Sweet and savory sauces, relishes, spreads, and seasonings'
    }
}, {
    'ProductID': 9,
    'ProductName': 'Mishi Kobe Niku',
    'SupplierID': 4,
    'CategoryID': 6,
    'QuantityPerUnit': '18 - 500 g pkgs.',
    'UnitPrice': 97.0000,
    'UnitsInStock': 29,
    'UnitsOnOrder': 0,
    'ReorderLevel': 0,
    'Discontinued': true,
    'Category': {
        'CategoryID': 6,
        'CategoryName': 'Meat/Poultry',
        'Description': 'Prepared meats'
    }
}, {
    'ProductID': 10,
    'ProductName': 'Ikura',
    'SupplierID': 4,
    'CategoryID': 8,
    'QuantityPerUnit': '12 - 200 ml jars',
    'UnitPrice': 31.0000,
    'UnitsInStock': 31,
    'UnitsOnOrder': 0,
    'ReorderLevel': 0,
    'Discontinued': false,
    'Category': {
        'CategoryID': 8,
        'CategoryName': 'Seafood',
        'Description': 'Seaweed and fish'
    }
}];

In this article