Adding tooltips to jQuery dynamically created elements

Question

I found this helpful jsfiddle on adding tooltips with jQuery.

How could I get the same results but with dynamically created elements?

Without any plugins, if thtas possible.

http://jsfiddle.net/UQTY2/29/

Depending on which options a user ticks, my div will display one of three coloured circles to show the importance of a task. Can I add a tooltip to the circles in a manner such as this?

  jQuery(function() {
      jQuery( '.veryImportant' ).tooltip();
  });

Answer 1

You just add the tooltip how you normally would, only make sure that you are calling .tooltip() AFTER the element has been added to the page. Based on your code, it seems you're trying to add it immediately, and if that element doesn't exist, it will never get it.

Simple sample:

<div id='test'>im a div</div>

$("#test").append("<span id='spantest'>hey</span>");
$("#spantest").tooltip(); //works fine, since the element exists at time of call