CODEWITHSUNDEEP
kendo-uikendo-multiselect
user1546233
user1546233

Reputation:

How to add tooltips for items in kendo multi select

Please show me the way how to add tooltip for items which have a long length in kendo multi-select.

Picture

Thanks.

Upvotes: 0

Views: 2492

Answers (2)

Bhumika Barad
Bhumika Barad

Reputation: 199

     <kendo-multiselect
      #multiselect
      [data]="data"
      [filterable]="true"
      textField="text"
      valueField="value"
      placeholder="e.g. Large"
      (filterChange)="onFilterChange($event)"
    >
 <ng-template kendoMultiSelectItemTemplate let-dataItem>
    <span class="text-ellipsis" [ngbTooltip]="dataItem"  openDelay="600" container="body" placement="top">{{ dataItem}} </span>
  </ng-template>
    </kendo-multiselect>

Angular version 17.3

Upvotes: 0

ezanker
ezanker

Reputation: 24738

Use the itemTemplate and/or tagTemplate and add a title attribute with the tooltip text:

$("#multiselect").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Apples", tooltip: "Apples tooltip text" },
    { id: 2, name: "Oranges", tooltip: "Oranges tooltip text" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  itemTemplate: '<span title="#: tooltip #">#: name #</span>',
  tagTemplate: '<span title="#: tooltip #">#: name #</span>'
});

itemTemplate is item while selecting from the dropdown, while tagTemplate is the item once selected.

DEMO

NOTE: you can use the same value for both the text and tooltip.

Upvotes: 2

Related Questions