jQuery chosen plugin causes wrong qTip tooltip position for dropdown

Question

I'm using qTip2 integrated with jQuery validation plugin, it shows a tooltip instead of default messages for invalid inputs, but for a chosen applied dropdown it shows tooltip in left-top corner of page. You can check it here http://jsfiddle.net/maysamsh/YjYg5/ Can I fix it?

It's errorPlacement script:

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

This fixed the problem:

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
        }

I set a target for chosen enabled dropdown, it's parent.