Adding a Tooltip on a Kendo DropdownList

[Brent]

I'm trying to add a Kendo Tooltip to a disable DropDownList, but it's not working. :/

My DropDowList:

@(Html.Kendo().DropDownListFor(m => m.AgencyId)
                      .OptionLabel("-- Select --")
                      .DataTextField("ProviderName")
                      .Name("ddlb_FedCarewarePDI_Provider")
                      .DataValueField("ProviderId")
                      .DataSource(src =>
                      {
                          src.Read(r =>
                          {
                              r.Action("getAgencyList", "AgencyReports").Type(HttpVerbs.Post);
                          });
                      }).HtmlAttributes(new { style = "width: 300px" })
                    )

 

My Kendo Tooltip Code:

@(Html.Kendo().Tooltip()
    .For("#ddlb_FedCarewarePDI_Provider")
    .ContentTemplateId("template")
    .Position(TooltipPosition.Top)
    .Width(400)
    .Height(500)
)

<script id="template" type="text/x-kendo-template">
    <p>#=Something Great Here#</p>
</script>

 

Ideas on what I need to fix?

 

 

 

 

 

 

 

[Ivan Danchev]

Hello Brent,

In order to show the ToolTip when the DropDownList is hovered you can wrap the DropDownList in a container, for example a div element:

<div id="container">
    @(Html.Kendo().DropDownListFor()
</div>

and configure the ToolTip to show up on hover over the DropDownList by setting its class (".k-dropdown") to the Filter configuration:

@(Html.Kendo().Tooltip()
    .For("#container")
    .Filter(".k-dropdown")

Regards,
Ivan Danchev
Progress Telerik

[Balaji]

Hi Ivan Danchev,

Can you provide working sample on how to display the text on hover?

I can able to do onSelect but don't know how achieve on mousehover appreciate if you provide working sample. 

  var processAssayDropDown = $("#ProcessId").data("kendoDropDownList");
  processAssayDropDown.bind("select", onSelect);

 

  $("span[aria-owns='ProcessId_listbox']").kendoTooltip({
            content: processAssayDropDown.text() 
        });

        function onSelect(e) {
            var text = e.item.text();
            $("span[aria-owns='ProcessId_listbox']").data("kendoTooltip").destroy();
            $("span[aria-owns='ProcessId_listbox']").kendoTooltip({
                content: text
            });
        }   

[Plamen]

Hi,

If we need to load the contend based on the selected value in the DropDownList one possible solution is to refresh the tooltip a bit latter the select event is thrown so the tooltip could synchronize with the rendered HTML. Here below is the code that worked correctly at my side: 

<div id="container">
    @(Html.Kendo().DropDownList()
                          .Name("color")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .Events(e => e.Select("onSelect"))
                          .BindTo(new List<SelectListItem>() {
                            new SelectListItem() {
                            Text = "Black",
                            Value = "1"
                            },
                            new SelectListItem() {
                            Text = "Orange",
                            Value = "2"
                            },
                            new SelectListItem() {
                            Text = "Grey",
                            Value = "3"
                            }
                          })
                          .Value("1")
                          .HtmlAttributes(new { style = "width: 100%" })
    )
    </div>


<script>
    $('#container').kendoTooltip({
        filter: '.k-dropdown',
        position: 'top',
        width: 400,
        height: 500,
        content: function (e) {
            var ddl = $("#color").data("kendoDropDownList");
            var value = ddl.value();

            var result = '<h3>' + value + '</h3>';

            return result;
        }
    });


    function onSelect(e) {
        var text = e.item.text();
        console.log(text)
        setTimeout(function () {
            var tooltip = $('#container').data("kendoTooltip");
            tooltip.refresh();
        }, 5)
    }
</script>

If you have further questions please let me know.

Regards,
Plamen
Progress Telerik