Multi Drop Down with ToolTip

[Stephen]

Hello,

 

We are looking for a way to do a tooltip on the drop down list so we can have additional information on an item. Is this possible?

[Konstantin Dikov]

Hello Stephen,

You could initialize the ToolTip widget over the popup element with filter set to "li", which will display the tooltip when you hover over an item. Following is a very simple example demonstrating such approach:

$("#dropDown").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,
    dataBound: function(e) {
        var popupElement = e.sender.popup.element;
        popupElement.kendoTooltip({
          filter: "li",
          content: function(e) {
            var target = e.target; // the element for which the tooltip is shown
            var dataItem = $("#dropDown").data("kendoDropDownList").dataItem(target);
            return dataItem.text; // set the element text as content of the tooltip
          },
          width: 400,
          height: 200,
          position: "top"
        });
    }
});

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress