Show List Item Details in ToolTip

Sometimes you might need to show additional information about a list item in a Kendo UI DropDownList.

A possible way to achieve this behavior is to use a Kendo UI Tooltip that displays the details when the user hovers with the mouse over the DropDownList item.

The following example demonstrates how to customize the information displayed in the Tooltip depending on the respective data item fields.

Example

<input id="dropdownlist" />
<script>
  var ddl = $("#dropdownlist").kendoDropDownList({
    dataSource: {
      transport: {
        read: {
          url: 'https://jsonplaceholder.typicode.com/users',
          dataType: 'json'
        }
      }
    },
    dataTextField: "username",
    dataValueField: "id"
  }).data('kendoDropDownList');

  $('body').kendoTooltip({
    filter: 'li.k-item',
    position: 'right',
    content: function(e){
      var item = ddl.dataItem($(e.target));

      var result = '<h3>' + item.name + '</h3>' +
                    '<h4>' + item.email + '</h4>' +
          'Address: <hr />' +
          '<p>Street: ' + item.address.street + '</p>' +
          '<p>Suite: ' + item.address.suite + '</p>' +
          '<p>ZIP Code: ' + item.address.zipcode + '</p>';

      return result;
    },
    width: 220,
    height: 280
  });
</script>

See Also

• JavaScript API Reference of the DropDownList
• How to Automatically Adjust the Width of a DropDownList
• How to Create DropDownLists with Long Items
• How to Detect Wrapper Focus Events
• How to Move the Group Label on Top of Items
• How to Prevent Popup Closure on Scroll
• How to Remove Items
• How to Set DataSource Dynamically
• How to Validate DropDownLists by Using Required Attributes

For more runnable examples on the Kendo UI DropDownList, browse its How To documentation folder.