Dynamic tooltip content & Dynamic DOM

Dynamic tooltip content & Dynamic DOM

How do I use UI Tooltip with dynamic content?

I want to init a tooltip that will show for every LI node inside the container. The LI nodes are dynamically changed and each tooltip should display dynamic data based on the state of each LI (and not based on a static attribute set onto the node). The LI states change over time, based on user interaction (the LI are added / removed too from the DOM).

  1. <div id="container">
  2. <ul>
  3. <li>Item 1</li>
  4. <li>Item 2</li>
  5. <li>Item 3</li>
  6. </ul>
  7. </div>

I can use something like this:

  1. $('#container').tooltip({
  2. items: 'li',
  3. track: true,
  4. content: function(){
  5. return 'static content';
  6. }
  7. });

but not (as there is no `li` parameter, something matching the `items` selector):

  1. $('#container').tooltip({
  2. items: 'li',
  3. track: true,
  4. content: function(callback, li){
  5. return getTooltipContentFor(li);
  6. }
  7. });

but the problem is that I can't tell what LI element was this called for.

Seem to me like missing functionality, for my usage scenario I would need the LI element, maybe a second argument added to the `content` option? Or I can get the LI element in other way, any ideea?