Adding a Tooltip on a Kendo DropdownList

2 posts, 0 answers
  1. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 01 Jun 2017 Link to this post

    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?

     

     

     

     

     

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1749 posts

    Posted 05 Jun 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top