New to Kendo UI for Angular? Start a free 30-day trial

Display a Tooltip for ComboBox List Items

Environment

ProductProgress® Kendo UI for Angular ComboBox

Description

How can I show а Tooltip when hovering over a ComboBox list option?

Solution

Use the kendoComboBoxItemTemplate to render the ComboBox items with a set title attribute inside a div element that contains the kendoTooltip directive.

      <ng-template kendoComboBoxItemTemplate let-dataItem>
        <div kendoTooltip>
          <span [title]="dataItem.text">{{ dataItem.text }}</span>
        </div>
      </ng-template>

The following example shows the full implementation of the suggested approach.

Example
View Source
Change Theme:

In this article

Not finding the help you need?