Javascript 使剑道UI下拉列表将选择控件的标题属性显示为剑道工具提示

Javascript 使剑道UI下拉列表将选择控件的标题属性显示为剑道工具提示,javascript,jquery,kendo-ui,kendo-asp.net-mvc,kendo-combobox,Javascript,Jquery,Kendo Ui,Kendo Asp.net Mvc,Kendo Combobox,我需要做什么才能使剑道UI下拉列表将title属性显示为剑道工具提示 这就是我正在做的: 先生 夫人 错过 $(函数(){ 变量工具提示=$(“#标题”).kendoTooltip({ 位置:“对”, 自动隐藏:对, 宽度:280, 动画:{ 开放式:{ 效果:“幻灯片输入:对”, 持续时间:300 }, 关闭:{ 效果:“幻灯片输入:对”, 相反:是的, 持续时间:200 } } }); $(“#Title”).kendoDropDownList(); }); 问题在于标题属于原始的选择元素

我需要做什么才能使剑道UI下拉列表将title属性显示为剑道工具提示

这就是我正在做的:


先生
夫人
错过
$(函数(){
变量工具提示=$(“#标题”).kendoTooltip({
位置:“对”,
自动隐藏:对,
宽度:280,
动画:{
开放式:{
效果:“幻灯片输入:对”,
持续时间:300
},
关闭:{
效果:“幻灯片输入:对”,
相反:是的,
持续时间:200
}
}
});
$(“#Title”).kendoDropDownList();
});

问题在于
标题
属于原始的
选择
元素,但不属于剑道UI装饰元素。当您在KendoUI下拉列表中转换
选择时,它会在周围创建一些额外的HTML元素,但
标题
不会复制到此元素中

因此,您可以做的是:

// Create DropDownList
var title = $("#Title").kendoDropDownList().data("kendoDropDownList");
// Copy title from the select into the `wrapper` element
title.wrapper.attr("title", $("#Title").attr("title"));
// Now, define the tooltip for this wrapper element
var tooltip = title.wrapper.kendoTooltip({
    position: "right",
    autoHide: true,
    width: 280,
    animation: {
        open: {
            effects: "slideIn:right",
            duration: 300
        },
        close: {
            effects: "slideIn:right",
            reverse: true,
            duration: 200
        }
    }
});

这里的JSFiddle:

问题是
标题
属于原始
选择
元素,但不属于剑道UI装饰元素。当您在KendoUI下拉列表中转换
选择时,它会在周围创建一些额外的HTML元素,但
标题
不会复制到此元素中

因此,您可以做的是:

// Create DropDownList
var title = $("#Title").kendoDropDownList().data("kendoDropDownList");
// Copy title from the select into the `wrapper` element
title.wrapper.attr("title", $("#Title").attr("title"));
// Now, define the tooltip for this wrapper element
var tooltip = title.wrapper.kendoTooltip({
    position: "right",
    autoHide: true,
    width: 280,
    animation: {
        open: {
            effects: "slideIn:right",
            duration: 300
        },
        close: {
            effects: "slideIn:right",
            reverse: true,
            duration: 200
        }
    }
});

这里的JSFiddle:

正如前面提到的,您的原始标记被剑道UI包装,并且“title”属性没有被复制。通过扩展DropDownList Kendo.UI类来修复它相对容易。以下是我如何在项目中修复它(TypeScript):


正如前面提到的,您的原始标记被剑道UI包装,并且“title”属性没有被复制。通过扩展DropDownList Kendo.UI类来修复它相对容易。以下是我如何在项目中修复它(TypeScript):


完美@OnaBai-谢谢你!完美@OnaBai-谢谢你!
export class DropDownListX extends kendo.ui.DropDownList {

    // Constructor
    constructor(element: Element, options?: kendo.ui.DropDownListOptions) {
        super(element, options);

        // Copy title attribute from element node to its parent (wrapper created by kendo ui)
        $(element).parent().attr("title", $(element).attr("title"));
    }
}

// Create an alias of the prototype (required by kendo.ui.plugin)
DropDownListX.fn = DropDownListX.prototype;
// Deep clone the widget default options
DropDownListX.fn.options = $.extend(true, { }, kendo.ui.DropDownList.fn.options);
// Specify the name of your Kendo UI widget. Used to create the corresponding jQuery plugin.
DropDownListX.fn.options.name = "DropDownListX";
// Create a jQuery plugin.
kendo.ui.plugin(DropDownListX);