How to show a popup on hover in Kendo Multiselect

Question

I have a kendo multiselect component that works great, but when text in my dropdown are too long I have to truncate it. I would show at least a tooltip on hover with the full text. Here is an example of the desired result (in this example I hover the first result, getting a popup with the full text) :

Here is my actual html:

        <kendo-multiselect kendoMultiSelectSummaryTag
                           [data]="enData"
                           [(ngModel)]="allCo"
                           [ngModelOptions]="{standalone: true}"
                           (filterChange)="handleFilterEn($event)"
                           [filterable]="true"
                           textField="text"
                           [virtual]="virtual"
                           valueField="coId"
                           (valueChange)="onValueChange($event)"
                           [value]="selectedCoToFilter"
                           class="form-control">
        </kendo-multiselect>

Answer 1

You can accomplish what you are looking to do by using templates. With templates you can customize how the drop down item appears, how the selected item(s) appear, etc. So, with that you can add whatever HTML you want including tooltips for your long name values.

Here is a sample of one way to customize the templates in Kendo Angular

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
    template: `
      <div class="example-config">
        Current value: {{value | json}}
      </div>
      <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
          [data]="listItems"
          [(ngModel)]="value"
          [textField]="'text'"
          [valueField]="'value'"
        >
        <ng-template kendoMultiSelectTagTemplate let-dataItem>
          <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
        </ng-template>
        </kendo-multiselect>
      </div>
    `
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: 'Small', value: 1 },
        { text: 'Medium', value: 2 },
        { text: 'Large', value: 3 }
    ];
    public value: any = [{ text: 'Medium', value: 2 }];
}

Multiple examples and code here: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates/

A possible way to do what you're looking for with a template - I'm not proficient in Angular, so this will likely need some tweaking. Here is a link to this sample on StackBlitz: https://stackblitz.com/edit/angular-3c7ve2?file=app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
    template: `
      <div class="example-config">
        Current value: {{value | json}}
      </div>
      <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
          [data]="listItems"
          [(ngModel)]='value'
          [textField]="'text'"
          [valueField]="'value'"
        >
        <ng-template kendoMultiSelectItemTemplate let-dataItem>
          <div title="{{ dataItem.title }}">{{ dataItem.text }} </div>
        </ng-template>
        </kendo-multiselect>
      </div>
    `
})
export class AppComponent {
    public listItems: Array<{ text: string, title: string, value: number }> = [
        { text: 'Small but really long ...', title: 'Small but really long text here and here and some more here but extra extra long long long', value: 1 },
        { text: 'Medium', title: 'Medium but title length', value: 2 },
        { text: 'Large', title: 'Large but title lenght', value: 3 }
    ];
    public value: any = [{ text: 'Medium', value: 2 }];
}