Kendo Drawer Tooltip

[Ursus]

Hi

I have a very simple drawer: 

    <kendo-drawer
      #drawer
      [items]="items"
      [mini]="true"
      mode="push"
      [(expanded)]="expanded"
      (select)="onSelect($event)"
      [autoCollapse]="false"
    >
    </kendo-drawer>

and I would like to display the item.text as a tooltip when the drawer is minimized... I tried a couple of things but cannot seem to get this working correctly

 

Thanks in advance

Ursus

[Hetali]

Hello Ursus,

We have a dedicated knowledge base article to render tooltips for Grid cells. Using this example, please make the following changes to show the tooltip on the Kendo UI Drawer items when the expanded state is set to false:

<ng-template #template let-anchor>
  <span *ngIf="anchor.nativeElement.className.includes('k-drawer-item')">
    {{ anchor.nativeElement.getAttribute("aria-label") }}
  </span>

  <span *ngIf="anchor.nativeElement.parentElement.className.includes('k-drawer-item')">
    {{ anchor.nativeElement.parentElement.getAttribute("aria-label") }}
  </span>
</ng-template>

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

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

In this StackBlitz example, the Drawer item text is shown in the tooltip when the expanded state is set to false.

Additionally, to receive a faster turnaround in the future (within 24 hrs for DevCraft Complete license), please open a Support Ticket instead of a Forum post.

I hope this solution helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Ursus]

Hi Hetali, thank you very much for the response - that works perfectly. Regarding the ticket: thank you for the reminder, I had forgotten that I had support 😊