Kendo MVC DropDownList-items with Tooltips

Question

first of all this one How to add a tooltip based on a DropDown list with Kendo wrappers? doesn't seem to work and I can't seem to find anything helpful.

All I want to do is add tooltips to items inside of the following Kendo DropDownList.

@(Html.Kendo().DropDownList()
    .Name("ddl-ebm")
    .DataTextField("EBMNummer")
    .DataValueField("Id")
    .OptionLabel("Neuer Datensatz...")
    .DataSource(ds => ds.Read("GetEbmNummern", "Rechner"))
    .Events(e => e.Select("onEbmSelect")))

The Kendo Tooltip element currently looks like this.

@(Html.Kendo().Tooltip()
    .For("#ddl-ebm")
    .Position(TooltipPosition.Top)
    .Content("!!!")
    .Width(120)
    .Events(events => events.Show("onHoverShowToolTip")))

The only thing that I got to work is putting a Tooltip over the DropDownList itself, but only if I set the container surrounding it for For() and set a Filter on .k-dropdown, but that's not exactly what I want.

Thanks in advance.

AGuyCalledGerald AGuyCalledGerald · Accepted Answer · 2017-08-22T11:06:28

First, use template to add standard titles to items:

@(Html.Kendo().DropDownList()
.Name("ddl-ebm")
.DataTextField("EBMNummer")
.DataValueField("Id")
.OptionLabel("Neuer Datensatz...")
.DataSource(ds => ds.Read("GetEbmNummern", "Rechner"))
.Template("<span class=\"drop-down-list-item\" title=\"#=EBMNummer#\">#=EBMNummer#</span>")
.Events(e => e.Select("onEbmSelect")))

On document load, you should add kendo functionality like this:

$(".drop-down-list-item").each(function () {
    $(this).kendoTooltip();
});

Kendo MVC DropDownList-items with Tooltips

1 Answers