4

I am Using Qtip 2 For MVC Validations,as mentioned here

qtip works fine but i have a strange problem when i scrolls the page Qtips position remains still (suppose to be move as control moves.)

My Code in jquery.validate.unobtrusive.js

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

    // Remove the following line so the default validation messages are not displayed       
    // 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();
    }

    /**** Added code to display the error message in a qTip tooltip ****/
    // Set positioning based on the elements position in the form
    var elem = $(inputElement),
        corners = ['top right', 'left bottom'],
        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'); }
}

Version Details : Qtip 2 Jquery 1.9.1 mvc 4

I want to move the Qtip as my control moves in the page. Thanks in Advance.

4

1 に答える 1

4

私にとって本当にうまくいったのはposition.container、qtipを追加する必要がある要素をqtipに知らせるように指定することです。このように、スクロールすると、qtipも一緒にスクロールするはずです。

$('.selector').qtip({
    content: {
        text: 'I am appended within a custom tooltips DIV'
    },
    position: {
        container: $('div.tooltips')
    }
});

ドキュメントはここにあります: http://qtip2.com/options#position.container

于 2014-07-17T09:50:56.350 に答える