Tooltip not working for DorpDownlistFor and MultiSelectFor controls

[Nageswara]

How to display tooltip when mouse hover over the Kendo MultiSelectFor and DorpDownlistFor controls in MVC?

Please provide the sample code.

[Iliana Dyankova]

Hello Nageswara,

In order to achieve this you should attach Kendo UI Tooltip widget to the DropDownList / Multiselect. Please pay attention to the content and filter configuration options. For example: 

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
     }
});

On a side note, I believe this blog post will be useful. Regards,
Iliana Nikolova
Telerik

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");

  ddl.ul.kendoTooltip({

     filter: "li",

     content: function (e) {

        var target = e.target; // element for which the tooltip is shown

        return $(target).text();

  }

});

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");

  ddl.ul.kendoTooltip({

     filter: "li",

     content: function (e) {

        var target = e.target; // element for which the tooltip is shown

        return $(target).text();

  }

});

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");

  ddl.ul.kendoTooltip({

     filter: "li",

     content: function (e) {

        var target = e.target; // element for which the tooltip is shown

        return $(target).text();

  }

});

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");

  ddl.ul.kendoTooltip({

     filter: "li",

     content: function (e) {

        var target = e.target; // element for which the tooltip is shown

        return $(target).text();

  }

});

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");

  ddl.ul.kendoTooltip({

     filter: "li",

     content: function (e) {

        var target = e.target; // element for which the tooltip is shown

        return $(target).text();

  }

});

[hkdave95]

Hi Iliana

...And how does one obtain the "ValueMember"?

 .value() does not work.

 I am trying to obtain the value of the "hovered" multiselect from within the RequestStart method.

 Cannot seem to find out how to do this after much research.

 Kind Regards

 David

[hkdave95]

Hi Iliana

 The current ReqestStart Code is:

    function LinkNamesMultiSelectRequestStart(e)
    {
        var oTarget = e.target;
        e.options.data = { lgMLINK_gId: $(oTarget).value() };
    }

Kind Regards

David

 

 

 

[hkdave95]

Hi Iliana

 One more piece to the puzzle.

 I have tried e.target.data("Value"), where Value is the Value Member.

                            @(Html.Kendo().MultiSelect()
                                .Name("LinkNamesMultiSelect")
                                .HtmlAttributes(new { style = "width: 100%;" })
                                .DataTextField("Text")
                                .DataValueField("Value")
                                .AutoBind(true)
                                .AutoClose(false)
                                .Events(E => E.Change("LinkNamesMultiSelectChange"))
                                .Placeholder(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litSelectLinkName", "Please select link name(s)"))
                                .DataSource(DS => DS.Read(R => R.Action("_ReadLinkNames", "Shared").Data("LinkNamesMultiSelectData")))
                                .Value(this.Model._oSelectedLinkNames)
                            )   

@(Html.Kendo().Tooltip()
    .For(".k-multiselect")
    .Filter("li")
    .LoadContentFrom("LinkNamesTooltipPartial", "Shared")
    .Position(TooltipPosition.Top)
    .Width(250)
    .Height(100)
    .AutoHide(false)
    .Events(events => events.RequestStart("LinkNamesMultiSelectRequestStart"))
)

 Kind Regards

 David

 

 

 

[Iliana Dyankova]

Hi David,

Apologies for the delayed reply - we are short on staff due to the Christmas holidays.

For this requirement you will need to retrieve the whole dataitem of the hovered element. This way you will get an access to the value and text simultaneously. Something like: 

var multiSelect = $("#LinkNamesMultiSelect").data("kendoMultiSelect")
var target = $(e.target);
var idx = target.index();
var dataItem = multiSelect.dataSource.data()[idx];

return dataItem.Text + " " + dataItem.Value;

Notice how the data item is retrieved from the data source based on the LI index.

Regards,
Iliana Nikolova
Telerik

[Julien]

Hello guys,

 

The solution of Iliana didn't worked for me, but I found an other solution by combining MVC and js documentation.

 Let's say you you a MultiSelect like bellow :

@(Html.Kendo().MultiSelect()
    .Name("selectedCounts")
    .Placeholder("Select counts...")
.DataTextField("Name") //Specifies which property of the Product to be used by the multiselect as a text.
                                    .DataValueField("ID") //Specifies which property of the Product to be used by the multiselect as a value.
                                    .ItemTemplate("<span title=' #: data.Tooltip #'> #: data.Name #</span>")
                                    .Filter(FilterType.Contains)
                                    .AutoClose(false)
                                    .BindTo(Model.Filters.Counts)
                                    )

 

[Julien]

Missed the post click and cannot edit, so going on here.

Let's say you have a MultiSelect like bellow :
@(Html.Kendo().MultiSelect()
                                    .Name("selectedCounts")
                                    .Placeholder("Select counts...")
                                    .DataTextField("Name") //Specifies which property of the Product to be used by the multiselect as a text.
                                    .DataValueField("ID") //Specifies which property of the Product to be used by the multiselect as a value.
                                    .ItemTemplate("<span title=' #: data.Tooltip #'> #: data.Name #</span>")
                                    .Filter(FilterType.Contains)
                                    .AutoClose(false)
                                    .BindTo(Model.Filters.Counts)
                                    )
where Model.Filters.Counts is a List of Objects with an ID (int), a Name (string) and a Tooltip (string).

The most important thing is that I used the "ItemTemplate" property and that I can access my Tooltip with "data.Tooltip".

 

Then have a look at your HTML generated and search the ID of your "ul" element containing your "li" dropdown list. It's always named like : "Name_of_your_multiselect_listbox", so for my exemple : ''selectedCounts_listbox"

 

Now you just have to add this javascript in your View :

$(document).ready(function () {
        $("#selectedCounts_listbox").kendoTooltip({
            filter: "li span",
            width: 120,
            position: "top"
        }).data("kendoTooltip");
        $("#selectedCounts_listbox").find("li span").click(false);
    });

 

The "li span" is a reference to the "ItemTemplate" that I've created, but you can adjust to your own template. For exemple "li p" if you used a paragraph, etc...

 

Hope this helped