specify different positions for separate tool tips

[c_martini]

I have been given the task of troubleshooting some markup a colleague has put in place as an iframe in facebook. There are 5 icons in the page within the iframe which trigger tool tips (jquery.qtip 1.0.0-rc3) when you hover the mouse pointer over them. Each of them is an li using a title attribute. The issue is that since all of the tooltips use the same positioning, the icons nearest the edges of the iframe on either side cause the tooltip to be partially hidden beyond the boundaries of the iframe when displayed.

What I need them to do is somehow have different positioning for each tooltip. At the moment, all the tooltips use this js:

JS Code

$('.qt').qtip({
		delay:0,
		position: {
			corner: {
				target: 'topMiddle',
				tooltip: 'bottomMiddle'
			}
		},
		style: {
			border : {
				width : 5,
				radius : 10
			},
			padding : 10,
			tip:true,
			name: 'cream' // Give it some style
		}
	});

How do I give each their own positioning?
[/code]    

[c_martini]

UPDATE: I have also now tried updating to the latest version of qTip and converting the code over. Still cannot figure out how to adjust the tooltips so that they do not run out of the iframe boundaries and partially hide. I have also tried using the adjust.method property and this has not helped, though I am not proficient in javascript, so I have probably got it wrong:

JS Code

$('.qt').qtip({
		delay: 0,
		position: {
			at: "top center",
			my: "bottom center",
                        adjust: "flip"
		},
		style: {
			tip: true,
			classes: "ui-tooltip-cream"
		}
	});

JS Code

$('.qt').qtip({
		delay: 0,
		position: {
			at: "top center",
			my: "bottom center"
		},
                adjust: {
                        method: "flip"
                },
		style: {
			tip: true,
			classes: "ui-tooltip-cream"
		}
	});

Neither of the above work for me. Any ideas?

[Craig]

use viewport: $(window)

JS Code

$('.qt').qtip({
    position: {
        at: "top center",
        my: "bottom center",
        adjust: {
            method: "flip"
        },
        viewport: $(window)
    },
    style: {
        tip: true,
        classes: "ui-tooltip-cream"
    }
});