kendo-uikendo-multiselect

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.


Solution

  • 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.