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.
Use the Tooltip template to display the content of its
anchor
elements.<ng-template #template let-anchor> <span>{{ anchor.nativeElement.innerText }}</span> </ng-template>
Set
showOn
tonone
andtoggle
the Tooltip programmatically.<div kendoTooltip showOn="none" [tooltipTemplate]="template" filter=".k-grid td" (mouseover)="showTooltip($event)"> ...
public showTooltip(e: MouseEvent): void { const element = e.target as HTMLElement; if ((element.nodeName === 'TD' || element.nodeName === 'TH') && element.offsetWidth < element.scrollWidth) { this.tooltipDir.toggle(element); } else { this.tooltipDir.hide(); } }
The following example demonstrates the full implementation of the approach. Hover over a cell whose text content doesn't fit in it, and the tooltip will appear.