Add tooltip to DrawerItem

[Abhijit]

I am using the kendo-drawer component at the left side of a page. When the drawer is collapsed, only the icons are visible. At this time I would like to show tooltips over the icons.

I am using the 'items' attribute of Drawer to specify the items. However I do not see any attribute for tooltips in the docs for https://www.telerik.com/kendo-angular-ui/components/layout/api/DrawerItem

Is there anyway this can be achieved?

[Hetali]

Hi Abhijit,

Thank you for reaching out.

We have a dedicated knowledge base article to render tooltips for Grid cells. Using this example, make the following changes to show the tooltip for the Kendo UI Drawer Items when it is not expanded:

<ng-template #template let-anchor>
  <span *ngIf="anchor.nativeElement.nodeName === 'LI'">
    {{ anchor.nativeElement['attributes']['aria-label'].value }}
  </span>
  <span *ngIf="anchor.nativeElement.nodeName !== 'LI'">
    {{ anchor.nativeElement.parentElement.parentElement['attributes']['aria-label'].value }}
  </span>
</ng-template>

<kendo-drawer-container>
  <div kendoTooltip
    showOn="none"
    [tooltipTemplate]="template"
    filter=".k-drawer li"
    (mouseover)="showTooltip($event)"
  >
    <kendo-drawer #drawer>
    </kendo-drawer>
  </div>
</kendo-drawer-container>

public showTooltip(e: MouseEvent): void {
  const element = e.target as HTMLElement;
  if ((element.nodeName === 'LI' || element.nodeName === 'KENDO-SVG-ICON') &&
       !element.className.includes('k-drawer-separator') && 
       !this.drawer.expanded) 
  {   
    this.tooltipDir.toggle(element);
  }  else {
    this.tooltipDir.hide();
  }
}

I have demonstrated the above approach in this StackBlitz example. Please give it a try and let me know if it helps or if you have any further questions.

Regards,
Hetali
Progress Telerik

[Richard]

Just to add for people finding this post (like me), I am using kendo 16 and 

 element.nodeName === 'KENDO-SVG-ICON'

is now:

 element.nodeName === 'KENDO-SVGICON'

otherwise works great :)