Position of qTip Modal from call within a tooltip

[chuuke]

So I have qTip2 working succesffuly, displaying the tooltip as a modal for some ajax content. Everything is working great, except the content within the modal tooltip has links that also call another tooltip. When I click any of those, the positioning goes way off screen (like -234.5px and -300px).

I know it has something to do with the position parameters, but I can't get it to work. Could I make it use the target of the previously clicked tooltip as its position? Or is there a way to load the new ajax content in the same tooltip?

link on main page:

JS Code

<a class="qtipajaxmodal" id="[id here]" href="[link here]" rel="[ajax link here]">Main Link</a>

link within ajax pulled content:

JS Code

<a class="qtipajaxmodal" id="[id here]" href="[link here]" rel="[ajax link to somewhere else here]">Another Link</a>

JS Code

// Make sure to only match links to wikipedia with a rel tag
		   $('a.qtipajaxmodal').live('mouseover', function() {
			   // Make sure to only apply one tooltip per element!
     			if( $(this).data('qtip') === 'object' ){ return; } 
 
			  // We make use of the .each() loop to gain access to each element via the "this" keyword...
			  $(this).qtip({
				 //overwrite: false, // Make sure the tooltip won't be overridden once created
				 id: 'modal2', 
				 content: {
					// Set the text to an image HTML string with the correct src URL to the loading image you want to use
					text: '<div class="ajaxqtipmodal-load" alt="Loading..."></div>',
					ajax: {
					   url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
					},
					title: {
					   text: 'Title: - ' + $(this).text(), // Give the tooltip a title using each elements text
					   button: true
					}
				 },
				  events: {
					 show: function(event, api) {
						 // Grab the tooltip element from the API
						 var tooltip = api.elements.tooltip
						 // ...and here's the extra event binds
						 tooltip.find('.ui-tooltip-titlebar').show();
					  },
					  hide: function(event, api) { 
                   		//api.destroy(); 
               		  }
				   },
				 position: {
					 target: $('#main'),
					 container: $('#main'),
					 my: 'center', // ...at the center of the viewport
				 	 at: 'center',
				 	 //viewport: $('#container'),
					 effect: false
				 },
				 show: {
					event: 'click',
					solo: true, // Only show one tooltip at a time
					modal: true,
					effect: function(offset) {
         				$(this).show(400); // "this" refers to the tooltip
      				} // ...and make it modal
 
				 },
				 hide: false,
				 style: {
					classes: 'ui-tooltip-fd-movie'
				 }
			 }).click(function(event) { event.preventDefault(); });
		   });

[Craig]

Can you setup a test case please: http://jsfiddle.net/fdavn/