nested qtip or a qtip inside another qtip

[uberman]

I need o display a unordered list inside a qtip and then every item inside the unordered list must show another qtip with the description of the item, can anyone show me some qtip inside another qtip example, I just don't get it from the demo.. please help me!!!

[Craig]

Hi uberman, what you need for this is pretty simple. You basically need two qTip calls, except one of them is nexted within the onRender API callback of the other, like this:

JS Code

$('.selector').qtip({
   content: '<ul></ul>', // UL List in first tooltip
   api: {
      onRender: function(){
         // Second qTip call which searches for li items within the first tooltips content
         this.elements.content.find('li').qtip({
            content: 'LI Description'
         });
      }
   }
});

Hope this helps!

[logan]

I am trying to accomplish something similar, but am having difficulty accessing the API (total greenhorn here).

The first round of tooltips are working, but I'm trying to have a submenu that can be accessed via tooltip in the primary tips.

Here is the code I'm appending to the JS in the index.html:

JS Code

var api = $('.tabdiv a[rel]').qtip("api"); // Access the API via the tooltip
	$('.democontent a[rel]').qtip({
	   content: '<ul></ul>', // UL List in first tooltip
	   api: {
		  onRender: function(){
			 // Second qTip call which searches for li items within the first tooltips content
			 this.elements.content.find('li').qtip({
				content: {
				url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
				}
			});
 	  	}
	}
});

Please help!

[Craig]

logan, is the 'rel' attribute your trying to access of the orginal tooltip or the original element (.democontent a[rel])? If the latter you'll need to do this insteasd

JS Code

url: this.elements.target.attr('rel') // Use the rel attribute of each element for the url to load

[logan]

Hi Craig,

Thank you for responding. What we are trying to accomplish is essentially creating an "RIT" or rich interactive tooltip. If you can imagine a tooltip within which you can have a facebook wall conversation. So inside the tooltip would be details about a keyword item (not unlike your ajax image demo's with the owls). You would therein be able to respond to the item ala' facebook-like newsfeed replys. So we need to incorporate a form-like tooltip prompt within the qtip that can be activated by clicking "reply". The comments made within this form and smart info about the posting member would update the corresponding item information in the DB, allowing it to be interacted with by others in the same manner.

I'm not sure my code is getting that across. If you have some spare time, we can discuss how we might repay you if you could consult us on this feature.

Kind regards,

Logan

btw, thank you for your generosity. qTip is amazing!