Make Kendo UI DropDownList display the Title attribute of Select Control as a kendoTooltip

Question

What do I need to do in order to make the Kendo UI DropDownList display the title attribute as a kendoTooltip?

This is what I'm doing: 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();
});

Answer 1

The problem is that title belong to the original select but not to Kendo UI decorated element. When you convert a select in a KendoUI DropDownList it creates some extra HTML elements around but title is not copied into this element.

So, what you can do is:

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

The JSFiddle here: http://jsfiddle.net/OnaBai/qDRv3/4/

Answer 2

As it was previously mentioned, your original tag gets wrapped by Kendo UI and 'title' attribute is not copied over. It is relatively easy to fix by extending the DropDownList Kendo.UI class. Here is how I fixed it in my project (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);