Adding tooltip to ListBox options

[Joshua]

Just as the title states I'd like to add a tooltip or even title to the options in the listbox. So that when a uses hovers the option the tip appears. The first Listbox binding is done on a SelectListItem List.

 

                @(Html.Kendo().ListBox()
                .Name("lbOptions")
                .ConnectWith("lbSelectedOptions")
                .Selectable(ListBoxSelectable.Multiple)
                .Toolbar(toolbar =>
                {
                    toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                    toolbar.Tools(tools => tools
                        .TransferTo()
                        .TransferFrom()
                        .TransferAllTo()
                        .TransferAllFrom()
                    );
                })
                .BindTo(ViewBag.Lists)
            )<!--End of lbProjects listbox-->
                @(Html.Kendo().ListBox()
                .Name("lbSelectedOptions")
                .BindTo(new List<SelectListItem>())
                .ConnectWith("lbOptions")
                .Selectable(ListBoxSelectable.Multiple)
            )<!--End of lbSelectedProjects listbox-->

[Anton Mironov]

Hi Joshua,

Thank you for the code snippet and the details provided.

In order to achieve the desired behavior, I would recommend using the following approach:

            $(document).ready(function () {
                $("#lbOptions").kendoListBox();

                var listBox = $("#lbOptions").data("kendoListBox");
                listBox.items().each(function() {
                    var itemText = $(this).text();
                  
                    if (!$(this).attr('title')) { 
                        $(this).attr('title', 'Tooltip for ' + itemText);
                    }
                });
            });

In the code above, I am using the "document.ready" scope which iterates all items in the ListBox and adds a tooltip for them.

Here is a dojo example that I prepared for the case:

• https://dojo.telerik.com/@anton.mironov/oWIREnUki

I hope this achieves the desired result.

Kind Regards,
Anton Mironov
Progress Telerik