Display a Tooltip for ComboBox List Items

Environment

Product

Progress® 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.

html

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

Change Theme

Theme

Loading ...