Using the Validation with qTip2

[Amelia]

I was wondering if it would be possible to use qTip2 to display the tooltips from the validation, instead of the default ones. I have spent several days trying to do this, with little success.

http://qtip2.com/api

With the jQuery Unobtrusive Validation, I can achieve this with the following edits to the code;

function onError(error, inputElement) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replaceAttrValue = container.attr("data-valmsg-replace"),
        replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    //replace = $.parseJSON(container.attr("data-valmsg-replace")) !== undefined;

    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }

    var element = inputElement;
    // Set positioning based on the elements position in the form
    var elem = $(element),
                        //corners = ['left center', 'right center'],
                        corners = ['bottom left', 'top center'],
                        flipIt = elem.parents('span.right').length > 0;

    // Check we have a valid error message
    if (!error.is(':empty')) {
        // Apply the tooltip only if it isn't valid
        elem.filter(':not(.valid)').qtip({
            overwrite: false,
            content: error,
            position: {
                my: corners[flipIt ? 0 : 1],
                at: corners[flipIt ? 1 : 0],
                viewport: $(window)
            },
            show: {
                event: false,
                ready: true
            },
            hide: false,
            style: {
                classes: 'qtip-red' // Make it red... the classic error colour!
            }
        })

        // If we have a tooltip on this element already, just update its content
        .qtip('option', 'content.text', error);
    }

        // If the error is empty, remove the qTip
    else { elem.qtip('destroy'); }
}

But I am having a difficult time figuring out how to replicate this behavior with Kendo UI.

[Daniel]

Hello,

A callback function or an event that can be used to initialize the custom tooltip is not supported. You could either specify an errorTemplate and use it to initialize the tooltip:

<script type="text/kendo" id="errorTemplate">
    #var currentMessageGuid = kendo.guid();#
    <span message-guid="#=currentMessageGuid#">${message}</span>
    #setTimeout(function(){#
        #$("[message-guid='" + currentMessageGuid + "']").qtip({...});#
    #})#
</script>

$("#container").kendoValidator({
    errorTemplate:  $("#errorTemplate").html()
});

or override the code in the validateInput method. Regards,
Daniel
Telerik