Using the Validation with qTip2

2 posts, 0 answers
  1. Amelia
    Amelia avatar
    5 posts
    Member since:
    Aug 2013

    Posted 17 Aug 2013 Link to this post

    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.

    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");"unobtrusiveContainer", container);
        if (replace) {
        else {
        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 (!':empty')) {
            // Apply the tooltip only if it isn't valid
                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.
  2. Daniel
    Daniel avatar
    2231 posts

    Posted 21 Aug 2013 Link to this post


    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>   
            #$("[message-guid='" + currentMessageGuid + "']").qtip({...});#
        errorTemplate:  $("#errorTemplate").html()
    or override the code in the validateInput method. Regards,
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top