This is a migrated thread and some comments may be shown as answers.

How to show a popup on hover in Kendo Multiselect

2 Answers 91 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Roberto
Top achievements
Rank 1
Roberto asked on 21 Apr 2021, 12:51 PM

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) :

 

 


2 Answers, 1 is accepted

Sort by
0
Roberto
Top achievements
Rank 1
answered on 21 Apr 2021, 12:54 PM

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>

0
Stoyan
Telerik team
answered on 26 Apr 2021, 01:02 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
Roberto
Top achievements
Rank 1
Answers by
Roberto
Top achievements
Rank 1
Stoyan
Telerik team
Share this question
or