Add tooltip to dropdown items

4 posts, 0 answers
  1. George
    George avatar
    7 posts
    Member since:
    Jul 2019

    Posted 11 Sep Link to this post

    How can I add a tooltip to my dropdown running in MVC? I have tried several ways I found online and in the forum but no luck.

    html page code:

    how can I add a tool tip to this drop down? I want to show some more details about the car when the users hovers over it

    <select id='cars' class='dropdownlist'>
    <option value=0>Select make</option>
      <option value='@Model.NewCars.CarId'>@Model.NewCars</option>
    </select>

     

  2. Missing user
    Missing user avatar

    Posted 13 Sep Link to this post

    Hello Mike,

    I believe this How-To article on showing list item details in a ToolTip will guide you in how to achieve the desired result.

    Basically this is what has to be done:

    • define the Kendo DropDownList and pass data to it:
    var ddl = $("#dropdownlist").kendoDropDownList({
        dataSource: {
          transport: {
            read: {
              url: 'https://jsonplaceholder.typicode.com/users',
              dataType: 'json'
            }
          }
        },
        dataTextField: "username",
        dataValueField: "id"
      }).data('kendoDropDownList');
    • define and customize the Kendo Tooltip:
    $('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
      });

    In the filter option specify the selector for the elements within the container which will display the Tooltip.

    Content would be the content of the Tooltip. Passing a custom function allows you to access the dataItem and its fields so the additional data can be displayed in the Tooltip.

    For additional details on the Tooltip settings you can review the API reference section of the Tooltip widget and the documentation section for the widget.

    I hope this helps. Please get back to me if you have further questions.

    Regards,
    Aleksandar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. George
    George avatar
    7 posts
    Member since:
    Jul 2019

    Posted 13 Sep in reply to Missing user Link to this post

    I've been looking at this example, however, I'm unable to change how the drop down is binding, so would that ajax call be the items I want to show in the tooltip or is it actually binding the dropdown in the example?
  4. Missing user
    Missing user avatar

    Posted 13 Sep Link to this post

    Hi Mike,

    If you open the example in a dojo and take a look at the response from the call to the demo url you'll notice that an array of objects is returned, containing a lot more information that can be displayed in the DropDownList. 

    By definition the Kendo UI DropDownList widget displays a list of values and allows for a single selection from the list. The dataValueField determines the field of the data item that provides the value of the widget. The dataTextField - the field of the data item that provides the text content of the list items. In this example the ToolTip takes advantage of this additional information returned from the server. Getting the reference to the selected dataItem from the DropDownList

    var item = ddl.dataItem($(e.target));

    allows for displaying some of the additional information in the ToolTip.

    It is also possible to make ajax calls for the data to be displayed in the ToolTip content. This is shown in the API reference section for the content option.

    Regards,
    Aleksandar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top