Dynamic Position of Qtip?

[Squashed]

I tried this to change the position of the qtip before showing it, but it doesn't work. Can anyone help?

JS Code

$(elements).each(function () {
    $(this).qtip( {
        content: 'some content'
     });
     var target = $(this);
     var api = $(this).qtip('api');
     api.beforeShow = function () {
         target.qtip( {
             position: {
                 corner: {
                     target: 'leftMiddle',
                     tooltip: 'rightMiddle'
                 }
             }
         });
         //api.updatePosition(); also tried this
    }
});

This is just a test, I want to be able to set different target corners depending on the space available.

Any help very much appreciated.

[Craig]

Try this Squashed:

JS Code

$(elements).each(function () {
	$(this).qtip( {
		content: 'some content',
		api: {
			beforeShow: function () {
				this.options.position.corner = {
					target: 'leftMiddle',
					tooltip: 'rightMiddle'
				}
			}
		}
	});
});

[Squashed]

(25th June 14:25)Craig Wrote:  Try this Squashed:

JS Code

$(elements).each(function () {
	$(this).qtip( {
		content: 'some content',
		api: {
			beforeShow: function () {
				this.options.position.corner = {
					target: 'leftMiddle',
					tooltip: 'rightMiddle'
				}
			}
		}
	});
});

Thanks for the reply Craig, however the code above appears to position at target: leftTop, tooltip: leftTop.

I have managed to make it work by borrowing an idea from one of the examples and use a mouseenter function to destroy/recreate the tip each time. However this doesn't seem to be a very efficient approach.

I also want to set the tip size depending on the space available in the browser window and the position of the target, so that the tip is always fully visible (I also set overflow: auto). I have worked out how to do that bit, the question is how to best update the tip dimensions and position.