jQuery选择的插件导致错误的qTip工具提示位置下拉列表

Question

我正在使用与{jQuery验证插件集成的qTip2，它显示工具提示而不是无效输入的默认消息，但是对于chosen应用的下拉列表，它会在页面的左上角显示工具提示。你可以在这里查看http://jsfiddle.net/maysamsh/YjYg5/ 我能解决吗？

这是errorPlacement脚本：

errorPlacement: function(error, element)
        {
            // Set positioning based on the elements position in the form
            var elem = $(element),
               corners = ['left center', 'right 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: 'ui-tooltip-red ui-tooltip-rounded' // 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'); }
        },
         // Odd workaround for errorPlacement not firing!
        success: function(label, element) {
            // Destroy tooltips on valid elements
            $(element).not('.error').qtip('destroy');
            $.noop
        }

Answer 1

这解决了问题：

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

            // Check we have a valid error message
            if (!error.is(':empty')) {
                if (elem.hasClass("chosen-rtl")) {
                    // Apply the tooltip only if it isn't valid
                    elem.filter(':not(.valid)').qtip({
                        overwrite: false,
                        content: error,
                        position: {
                            my: corners['left center'],
                            at: corners['left center'],
                            target: elem.parent()
                        },
                        show: {
                            event: false,
                            ready: true
                        },
                        hide: false,
                        style: {
                            classes: 'ui-tooltip-red ui-tooltip-rounded' // 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);
                } else {
                    // 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),
                            target: elem
                        },
                        show: {
                            event: false,
                            ready: true
                        },
                        hide: false,
                        style: {
                            classes: 'ui-tooltip-red ui-tooltip-rounded' // 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'); }
        },
         // Odd workaround for errorPlacement not firing!
        success: function(label, element) {
            // Destroy tooltips on valid elements
            $(element).not('.error').qtip('destroy');
            $.noop
        }

我为所选的已启用下拉列表设置了一个目标，即它的父级。