使 Kendo UI DropDownList 将 Select Control 的 Title 属性显示为 kendoTooltip答案

【问题标题】：Make Kendo UI DropDownList display the Title attribute of Select Control as a kendoTooltip使 Kendo UI DropDownList 将 Select Control 的 Title 属性显示为 kendoTooltip
【发布时间】：2013-11-02 20:19:27
【问题描述】：

我需要做什么才能使 Kendo UI DropDownList 将 title 属性显示为 kendoTooltip？

这就是我正在做的事情：http://jsfiddle.net/EdsonF/qDRv3/1/

<div class="editor-field">
    <select id="Title" name="Title" title="What's your title?">    
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Miss">Miss</option>
</select>
</div>


$(function () {  
var tooltip = $('#Title').kendoTooltip({
        position: "right",
        autoHide: true,
        width: 280,
        animation: {
            open: {
                effects: "slideIn:right",
                duration: 300
            },
            close: {
                effects: "slideIn:right",
                reverse: true,
                duration: 200
            }
        }
    });
$("#Title").kendoDropDownList();
});

【问题讨论】：

标签： javascript jquery kendo-ui kendo-asp.net-mvc kendo-combobox

【解决方案1】：

问题是title 属于原始select 但不属于Kendo UI 装饰元素。当您在 KendoUI DropDownList 中转换 select 时，它会在 周围创建一些额外的 HTML 元素，但 title 不会复制到此元素中。

那么，你可以做的是：

// 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：http://jsfiddle.net/OnaBai/qDRv3/4/

【讨论】：

完美的@OnaBai - 谢谢！

【解决方案2】：

如前所述，您的原始标签会被 Kendo UI 包裹，并且不会复制“title”属性。通过扩展 DropDownList Kendo.UI 类相对容易修复。这是我在项目（TypeScript）中修复它的方法：

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);

【讨论】：