ExtJS Quicktip constrains problem

I've got a column renderer defined that creates a HTML fragment which contains the ext.qtip attributes to create a quicktip. All works fine, the image renders in the grid cell, when i hover over the image a tooltip with the larger image is shown ... all nice but the quicktip on the bottom row expands beyond the constraints of the panel, is there any way to make it stay in开发者_JAVA百科side the panel boundaries?

var thumbRenderer = function(value, meta, record){
    var thumbPath   = Config.baseUrl + 'images/thumb/' + record.get('filename');
    var previewPath = Config.baseUrl + 'images/big/' + record.get('filename');
    return String.format('<img src="{0}" ext:qwidth="312" ext:qtip="<img style=\'margin: 2px 0;width:300px;\' src=\'{1}\' />" width="60" class="pic" />', thumbPath, previewPath);
}

You may want to look at the showAt method:

tip.showAt([x,y]);

Where x and y are the respective x and y co-ordinate positions.

EDIT: You can also use the showBy() method on a QuickTip instance:

http://dev.sencha.com/deploy/dev/docs/source/Tip.html#method-Ext.Tip-showBy