Rendering Tooltips for Spreadsheet Cells

Environment

Product

Progress® Kendo UI for Angular Tooltip

Progress® Kendo UI for Angular Spreadsheet

Description

How can I show the content of a Kendo UI for Angular Spreadsheet cell in a tooltip which will be displayed when the user hovers over that cell?

Solution

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

   html

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

2. Wrap the Spreadsheet component inside the kendoTooltip directive. Set showOn to none and handle the mouseover event to show the Tooltip in specific conditions.

   html

   <div
     kendoTooltip
     showOn="none"
     [tooltipTemplate]="template"
     filter="div .k-spreadsheet-cell.k-vertical-align-bottom"
     (mouseover)="showTooltip($event)"
   >
     <kendo-spreadsheet></kendo-spreadsheet>
   </div>

3. Use the toggle and hide methods to change the visibility of the Tooltip programmatically. Show a tooltip when hovering over Spreadsheet cells.

   ts

   public showTooltip(e: MouseEvent): void {
       const element = e.target as HTMLElement;
       if (
           element.nodeName === 'DIV' &&
           (element.classList.contains('k-spreadsheet-cell') ||
           element.classList.contains('k-vertical-align-bottom'))
       ) {
           this.tooltipDir?.toggle(element);
       } else {
           this.tooltipDir?.hide();
       }
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• Rendering Tooltips for Grid Cells
• Tooltip Overview
• Spreadsheet Overview
• API Reference of the TooltipDirective