Add tooltip to dropdown items

[George]

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>

[Karan]

Hi Aleksandar,

Can we implement the same without using jquery in angular?

Also, the link given, showing list item details in a ToolTip, is not available.

[Neli]

Hi Karan,

As far as I understand your question is related to Kendo UI for Angular suite. If this is the case, please add your question and details about your scenario in the dedicated Kendo Angular forum:

- https://www.telerik.com/forums/kendo-angular-ui

Regards,

Neli

[Aleksandar]

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

[George]

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?

[Aleksandar]

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

[anil]

If we apply tooltip with body it will apply to all li and options.Is it possible with in dropdown Id ?.So it will not effect all areas.If anything like that please share.

[Aleksandar]

Hello Anil,

You can customize the filter configuration option to display the tooltip on the desired DropDownList. The DropDownList renders an ID attribute that is generated from the ID of the widget and the -list suffix. This way you can filter for a particular DropDownList:

filter: '#dropdownlist-list li.k-item',

 Here is an updated example.

Regards,
Aleksandar
Progress Telerik

[anil]

Hello Aleksandar,

Its working fine as per your information.But one item left when there is no data or which data i want to show as a tooltip iam getting below behavior.Please see the attached file.

[anil]

Hello Aleksandar,
Its working fine as per your information.But one item left when there is no data or which data i don't want to show as a tooltip iam getting below behavior.Please see the attached file.I tried to remove that using css but unable to make it.Is there any way to hide that.

[Aleksandar]

Hi Anil,

You can show the tooltip conditionally, as demonstrated in this knowledgebase article:

https://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-length-condition

For example, in the updated dojo the tooltip will not be shown for the dataItem with id=5. You can use this approach and not show the tooltip unless a condition is met.

Regards,
Aleksandar
Progress Telerik

[anil]

Hi Aleksandar

$('body').kendoTooltip({
    show: function (e) {
        if (this.content[0].innerHTML.trim().length > 28) {
            this.content.parent().css("visibility", "visible");
        }

    },
    hide: function (e) {
        this.content.parent().css("visibility", "hidden");
    },
    filter: '#AssociatedClinicalProgram-list li.k-item,IrtApplicationId-list li.k-item,#ProtocolIntegrationTypeId-list li.k-item,' +
        '#CountryId-list li.k-item,#UncontrolledSubstanceReturnDepot-list li.k-item,#ControlledSubstanceReturnDepot-list li.k-item,' +
        '#KitType_listbox-list li.k-item,#KitManagementType-list li.k-item,#KitBlindingModeId-list li.k-item,#InspectionLevel-list li.k-item,' +
        '#DepotId-list li.k-item,option',
    position: 'right',
    content: function (e) {
        var item = e.target[0].innerText.trim();
        var result = item;
        return result;
    },
});

This is my code still iam getting the box which have any data. if iam not binding the data.Please see the attached file.

[Aleksandar]

Hi Anil,

I see the empty tooltip in the screenshot but failed in reproducing the behavior. Can you provide a runnable example where I can observe the issue? This way I can provide a better suggestion on how to handle the case.

Regards,
Aleksandar
Progress Telerik

[anil]

Hi Alaksandar,

Can we go for a call so please provide your official skype or anything which we can sort out there.As recently we upgraded our Kendo UI version 2020.2.617 so we are facing like these issue.Please provide your communication so we can close this on call.Please help me on that.

 

Thanks,

AnilKumar.D

[Aleksandar]

Hi Anil,

I will ask you to open a Support ticket where we can discuss further your availability and the possibility for a Remote Web Assistance session, based on your License. Note that Remote sessions are available for holders of DevCraft Ultimate license. Nevertheless, I will still ask you to try and isolate the behavior and provide a runnable example where we can observe the issue you experience. This will allow us to prepare better for a session and be more productive in helping resolve the issue.

Regards,
Aleksandar
Progress Telerik

[Abdullah]

Do we have a same fix for Angular version of drodownlist @alex?

[Abdullah]

Do we have a same fix for Angular version of drodownlist @alex?

I need to show a tooltip on each dropdownlist item when we hover the mouse over on it

[Aleksandar]

Hi Abdullah,

I am not sure I understand what fix are you looking for? Can you elaborate?

Also if the question relates to the Kendo UI for Angular 2+ suit I will also ask you to post your question with the additional details in the dedicated forum section: https://www.telerik.com/forums/kendo-angular-ui 

Regards,
Aleksandar
Progress Telerik