Qtip2 tooltip position not displaying within viewport

Question

I have tried to display the tooltip within the viewport,However its displaying outside the viewport.

Here is the fiddle http://jsfiddle.net/sarathsprakash/vN2z9/2/

code

$('#hi').qtip({

    position: {
        target: false,

        adjust: {

            method: 'invert invert',
        },
        viewport: $("#con")
    },
    content: {
        text: function (event, api) {
            $.ajax({
                url: '/echo/html/'
            })
                .then(function (content) {

                api.set('content.text', content);
            }, function (xhr, status, error) {
                api.set('content.text', status + ': ' + error);
            });

            return '<img src="http://www.keespeek.com/Assets/images/scoreIcons/preloader.gif"/>';
        }
    },
    tip: true 
});

Could somebody please help me to sort this out. Thanks in advance