Positioning and flipping jQuery UI tooltips and pointers

Question

$(".box").tooltip({
    show: false,
    hide: false,
    position: {
        my: "center bottom-25",
        at: "center top",
        collision: "flipfit flip",
        using: function( position, feedback ) {
            $(this).css( position );
            $("<div>")
                .addClass( "ui-tooltip-arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
        }
    }
});

Demo: http://jsfiddle.net/av4je/

Everything is working as intended except right-aligned tooltips.

Is there a way to flip their pointers too?

Answer 1

Thing is , in the statement .addClass( feedback.horizontal ), it is actually adding the left class and hence it is aligning the arrow towards left .

Please check by changing the contents of the left class with the contents of the right class i.e. replace contents of ".ui-tooltip-arrow.left" class by the contents of ".ui-tooltip-arrow.right"

You will get your solution.

Answer 2

Old thread, but if someone hits the same issue:

replace

.addClass(feedback.horizontal)

with

.addClass((feedback.element.left + 10 >= feedback.target.left ? 'left' : 'right'))

(feedback.horizontal is not reliable)