[Solved] Reload qtip with new items

[Randolf]

Hi,
first of all, thanks for the plugin, it´s fantastic...

My question...
I change content dinamically and when I load a new content that match with the jquery selector, tooltips not work...

For example:
HTML Code

JS Code

<div id="1" class="tooltip">Some content 1</div>
<div id="2" class="tooltip">Some content 2</div>
<div id="3">Some content 3</div>
 
<input id="add_class" type="button" value="Add Tooltip">

JS Code

JS Code

jQuery(document).ready(function() {
	$('.tooltip').each(function(){
		$(this).qtip({
			content: "String of the tooltip",
			show: 'mouseover',
			hide: 'mouseout'
		})
	})
 
	$("#add_class").click(function() { 
		$("#3").addClass("tooltip");
	});
});

When I click the button, the class it´s added correctly to the div, but the tooltip not show...
How can I "reinitialize" the tooltip for the new element??

P.D: I´m not english.. I hope explained well..

[Craig]

Randolf, you could use the .live() methods:

JS Code

jQuery(document).ready(function() {
   $('.tooltip').live('mouseover', function() { 
     // Make sure to only apply one tooltip per element!
     if( $(this).data('qtip') === 'object' ){ return; }
 
      $(this).qtip({
         content: "String of the tooltip",
         show: 'mouseover',
         hide: 'mouseout'
      });
   });
 
   $("#add_class").click(function() { 
      $("#3").addClass("tooltip");
   });
});

[Randolf]

Sorry, I've been very busy.
I didn´t know the existence of the live() method.
It worked perfectly!!

Thanks very very much.

[daden]

A couple of updates on this -- I am dynamically refreshing a datatable and needed to have the qtips show up on the new lines. I needed to make a couple of changes to the following to make it work for all dynamically added items:

1) Changed the check on whether the tooltip exists by using typeof(), so it became:

if( typeof( $(this).data('qtip') ) == 'object' ){ return; }

2) The second problem is that although this created the qtip with the first mouseover, it didn't display it until the second mouseover. To address that, I added the following after the qtip call which forces a display after the qtip is added:

$(this).qtip('show');

Hope that helps!

daden

(27th October 00:09)Craig Wrote:  Randolf, you could use the .live() methods:

JS Code

jQuery(document).ready(function() {
   $('.tooltip').live('mouseover', function() { 
     // Make sure to only apply one tooltip per element!
     if( $(this).data('qtip') === 'object' ){ return; }
 
      $(this).qtip({
         content: "String of the tooltip",
         show: 'mouseover',
         hide: 'mouseout'
      });
   });
 
   $("#add_class").click(function() { 
      $("#3").addClass("tooltip");
   });
});