如何使用Kendo包装器基于DropDown列表添加工具提示? [英] How to add a tooltip based on a DropDown list with Kendo wrappers?

问题描述

DropDownList:

DropDownList:

 @(Html.Kendo().DropDownList()
                              .Name("ddlRoles")
                              .OptionLabel("ACCOUNT TYPE")
                              .HtmlAttributes(new { @class = "ddlRoles" })
                              .BindTo((IEnumerable<SelectListItem>)ViewBag.ApplicationRoles)
                          )

工具提示

 @(Html.Kendo().Tooltip()
                        .For("#help-tooltip")
                        .Position(TooltipPosition.Top)
                        .Content("Hello")  
                        )

内容"Hello"我希望它基于ddlRoles上选择的项目

The content "Hello" I want it to base it on the item selected on ddlRoles

推荐答案

   @(Html.Kendo().DropDownList()
                                  .Name("ddlRoles")
                                  .OptionLabel("ACCOUNT TYPE")
                                  .HtmlAttributes(new { @class = "ddlRoles text-danger" })
                                  .BindTo((IEnumerable<SelectListItem>)ViewBag.ApplicationRoles)
                                 )
                              )

然后使用工具提示

  @(Html.Kendo().Tooltip()
                            .For("#ddlRoles").

                            .Position(TooltipPosition.Top)
                            .Events(events => events.Show("onHoverShowToolTip"))
                            )

when the tooltip is shown, call a javascript function

    function onHoverShowToolTip() {
        loadToolTipContent();
    }

function loadToolTipContent() {
    //this call getToolTipContent();
    $("#the name of the generated tooptip").data("kendoTooltip").options.content = getToolTipContent();

    $("#the name of the generated tooptip").data("kendoTooltip").refresh();
}

function getToolTipContent() {
    var role = selectedRole();
    var result = "THE CONTENT THAT YOU WANT";

    return result;
}

这篇关于如何使用Kendo包装器基于DropDown列表添加工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！