angulartypescriptkendo-uikendo-ui-angular2kendo-combobox

How to add tooltip in kendo combobox?


Check StackBlitz project and suggest how to add tooltips to the dropdown, so that I am able to see tooltips for 'Small,' 'Medium,' and 'Large' dropdowns which is mentioned in StackBlitz project?


Solution

  • You can define a template for the items of the combobox, specifically kendoComboBoxItemTemplate.

    Place the following inside your combobox:

    <kendo-combobox [allowCustom]="true"
                    [data]="data"
                    [textField]="'text'"
                    [valueField]="'value'"
                    [filterable]="true"
                    (filterChange)="handleFilter($event)"
                    [placeholder]="'T-shirt size'">
        <ng-template kendoComboBoxItemTemplate let-dataItem>
            <div [title]="dataItem.text">{{dataItem.text}}</div>
        </ng-template>
    </kendo-combobox>
    

    You can place anything you want or need in the title attribute to serve as a tooltip.