Add tooltip to dropdown items

[Karan]

Hi,

Can we apply tooltip to the dropdown items for kendo-dropdownlist?
Note: The same is implemented in the jquery Add tooltip to dropdown items in Kendo UI for jQuery | Telerik Forums. But here I need to implement without using jquery.

Thanks,

Karan Shah

[Hetali]

Hello Karan,

In order to show a tooltip for the Kendo UI DropDownList items, wrap the DropDownList component in the kendoTooltip directive with filter 'li.k-list-item' and set the desired template using the tooltipTemplate. Additionally, make sure to append the popup of the DropDownList to 'component'. For example:

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

<div kendoTooltip [tooltipTemplate]="template"filter="li.k-list-item">
 <kendo-dropdownlist [data]="areaList" [popupSettings]="{ appendTo: 'component' }">
 </kendo-dropdownlist>
</div>

I have created this StackBlitz example to show the tooltip on the DropDownList items.

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

Regards,
Hetali
Progress Telerik

[Karan]

Hi Hetali,

Thanks, this was quite helpful.

Although, I am looking to display the id (eg: Pin code) that is associated with the area in the above example.

Also, I observed that after applying the above changes all the options were displayed in upper case.

Thanks,

Karan

[Hetali]

Hi Karan,

To show the zip code of the city, use the mouseover event and make the following changes:

<ng-template #template let-anchor>
  <span>{{ zipCode }}</span>
</ng-template>

<div
  kendoTooltip
  [tooltipTemplate]="template"
  filter="li.k-list-item"
  style="padding-top: 10px;"
  showOn="none"
  (mouseover)="showTooltip($event)"
>
  <kendo-dropdownlist 
    [data]="areaList" 
    [popupSettings]="{ appendTo: 'component' }"
    valueField="id"
    textField="city"
  >
  </kendo-dropdownlist>
</div>

@ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;
public areaList: any[] = [{ id: 1, city: 'Boston', zipCode: '02110' }];

public zipCode: string;

public showTooltip(e: MouseEvent): void {
  const element = e.target as HTMLElement;
  if (element.nodeName === "LI" || element.className === "k-list-item") {    
    this.areaList.forEach((item) => {
      if(element['innerText'] === item.city) {
        this.zipCode = item.zipCode;
      } 
    });
    this.tooltipDir.toggle(element);
  } else {
    this.tooltipDir.hide();
  }
}

Here's the updated StackBlitz example showing the zip code of the city in the Tooltip. Let me know if this helps.

The DropDownList items are not displayed in upper case on my end. To assist you with the issue, could you update the StackBlitz example and share it here? I can then investigate.

Looking forward to hearing form you.

Regards,
Hetali
Progress Telerik