How to show a popup on hover in Kendo Multiselect

[Roberto]

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 my mouse is on the first result, getting a popup with the full text) :

 

 

[Roberto]

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>

[Stoyan]

Hello Roberto,

The code snippet you have provided uses Kendo UI for Angular. However you've set the product category of this thread to Kendo UI for jQuery. Which product are you using in this scenario?

If you are using Kendo UI for jQuery I suggest the following solution. To show a tooltip over the list of available options in the MultiSelect Widget use the ToolTip Widget.

1.  Define an itemTemplate of the MultiSelect. With the template add a span with the class truncated to all truncated items. This will allow you to show the ToolTip over truncated items only.

   itemTemplate:kendo.template('# if(text.length>25){ # <span class="truncated"> #= text # </span> #}else{# #= text # #}#')

2. Initialize a ToolTip from the body of the DOM. Then use its filter configuration property to specify which elements to trigger the ToolTip.
3. Use the ToolTip's content property to specify its content.

    $("body").kendoTooltip({
               position: "top",
               filter: "li span.truncated",
               autoHide: true,
               content: function(e) {
                 return e.target.text();
               },
               width: "auto"
             });

4. Apply some styling to prevent the list from overflowing.

   .k-list-scroller{
           overflow:hidden;
   }
   .truncated {
           overflow:hidden;
           white-space:nowrap;
   }

Refer to this Dojo for a running example of the above. For additional information about Kendo Template review this article. 

 

Regards,
Stoyan
Progress Telerik