This is a migrated thread and some comments may be shown as answers.

Multi Drop Down with ToolTip

1 Answer 172 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 14 Jul 2016, 05:14 PM

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?

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 18 Jul 2016, 10:17 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
DropDownList
Asked by
Stephen
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or