Question

我正在使用Qtip 2进行MVC验证，如上所述here

qtip工作正常但是当我滚动页面时我有一个奇怪的问题Qtips位置保持不变（假设在控件移动时移动。）

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

版本细节： Qtip 2 Jquery 1.9.1 mvc 4

我想移动Qtip，因为我的控件在页面中移动。在此先感谢。

Answer 1

对我来说非常有效的是指定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

滚动时更改Q Tip的位置

1 个答案: