ToolTip Kendo MVC Widget Combobox

[Russ]

I found help from http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip in getting this far.  However, we are using Kendo MVC Widgets so, the line of code
below "return target.text() is never populated.  I did find by poking around in debugger that e.target.context.value had the values for each generated <input> tag in both the Html.Kendo().TextBox() and Html.Kendo().ComboBox().

Here's the code that displays a Kendo Tooltip for every input html element within a specific div.

$(document).ready(function () {
        $("#project-tabs").kendoTooltip({
             filter: "input",
             content: function (e) {
                     var target = e.target; // the element for which the tooltip is shown
                     //return target.text(); // set the element text as content of the tooltip --> This does not work on MVC.
                     return e.target.context.value;  // This does work on MVC Widget
            }
    });
});

Is there a better way?

[Russ]

Moving ahead, I tried to add additional logic to only show the tooltip if the length of the input tag is 25 or more characters, otherwise, the input fields are large enough to see on the web page.  All is well except, if I change the Kendo Combobox, the tooltip shows the old value.  If I go over and hover over a different field with 25 or more characters and then come back to the previous Combobox, the tooltip is correct.  Any ideas?

// customize the _show method to call options.beforeShow
// to allow preventing the tooltip from being shown..
kendo.ui.Tooltip.fn._show = function (show) {
    return function (target) {
        if (typeof this.options.beforeShow === "function") {
            var e = {
                sender: this,
                target: target,
                preventDefault: function () {
                    this.isDefaultPrevented = true;
                }
            }

            this.options.beforeShow.call(this, e);

            if (!e.isDefaultPrevented) {
                // only show the tooltip if preventDefault() wasn't called..
                show.call(this, target);
            }
        }
    };
}(kendo.ui.Tooltip.fn._show);

$(document).ready(function () {
    $("#project-tabs").kendoTooltip({
        filter: "input",
        width: 200,
        position: "top",
        beforeShow: function (e) {
            if (e.target.context.value.length < 25) {
                // don't show the tooltip if the name attribute contains less than 25 characters
                e.preventDefault();
            }
        },

        content: function (e) {
            var target = e.target; // the element for which the tooltip is shown
            //return target.text(); // set the element text as content of the tooltip
            return e.target.context.value;
        },

    });
});

[Russ]

I figured out a solution by reading the API Reference. :)  I added this.refresh() before the show.call(this, target).

I really wish as a user/developer  using Kendo MVC, and Kendo UI, there were more examples on things we all have to do with every basic project.  What can we do to improve this?  I know this is a challenge for us all.  Putting a tooltip on a Html.Kendo().TextBox() and Html.Kendo().ComboBox() should not take this much time to figure out.  I'm speaking about adding a tooltip that shows the value when the value is larger than the display area for the input.  If I disable the widget, I'm hoping what I've done will work.  Lets make using Kendo the easiest thing to use so more use it.  Telerik/Kendo rocks, I love what we can do with it, but some things take more time than it should.

this.refresh();
show.call(this, target);

[Petur Subev]

Hello Russ,

Thank you for sharing your solution and the warm words about the KendoUI framework - we really appreciate it. We are trying to do our best with the documentation, however sometimes there are scenarios that are not supported out-of-the-box and we cannot create work-arounds for everyone of them.

Everyone that wants to help us improve our learning resources are free to:

Contribute to our documentation:

https://github.com/telerik/kendo-docs

Or share code-library demo projects that you find a well-known scenarios that are not demonstrated anywhere else.

http://www.telerik.com/support/code-library/aspnet-mvc

Kind Regards,
Petur Subev
Telerik