title: Loading AJAX data for a jQuery tooltip
body: <p>I have some content which is loaded via AJAX; a UL element with li items. Each li item has a tooltip. I've managed to implement this.</p>
  
  <p>I'm trying to load tooltip content via AJAX for each li item. How I can proceed with this?</p>
  
  <p>This the call I make to load the li items via AJAX:</p>
  
  <pre><code>    //start AJAX request
      $.get(
          bs_url + '/ajax/' + ajax_action + '/', // server-side script
          ajax_params, // data for server-side script
          function(data, textStatus) {
              //alert("Response Data Loaded"); //
  
              $("li", list_elm).remove();
              $("div#related_questions_container").hide("slow");
  //          console.log(data);
              if (data) {
                  $("div#related_questions_container").show("slow");
                  list_elm.append(data);
  
                  // add the tooltip to AJAX loaded content
                  $("ul#related_questions li a").tooltip();
              }
          },
          'html'
      );
  </code></pre>
  
  <p>How can I now call an AJAX function to load data for each tooltip? I've set a value in the id attribute of the <code>&lt;a&gt;</code> element within each <code>li</code> item which I want to pass on as parameter to the AJAX function that loads the tooltip content.</p>
  
  <p>Here is the HTML partial that is loaded by AJAX for populating the ul element with li items:</p>
  
  <pre><code>&lt;?php
      foreach($this-&gt;related_queries_data as $o){
  ?&gt;
  &lt;li&gt;&lt;a href="#" title="&lt;?php echo htmlspecialchars($o['oQuery']-&gt;getTitle()) ?&gt;" id="id_&lt;?php echo htmlspecialchars($o['oQuery']-&gt;getId()) ?&gt;" &gt;&lt;?php echo htmlspecialchars($o['oQuery']-&gt;getTitle()); ?&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;?php
      }
  ?&gt;
  </code></pre>