title: How to show popover on click?
body: <p>I'm currently working in the 0.5 version of <a href="http://www.siwapp.org" rel="nofollow">Siwapp</a> and I'm trying to show a popover for the payments button on each row of a invoices table. But I have to do it with a click. I have the following JS code:</p>
  
  <pre><code>jQuery(function($){
  
    $('table[data-type="invoices"] a.payments').popover({
      live: true,
      placement: 'left',
      offset: 5,
      html: true,
      content: function() {
        return $(this).attr('class');
      },
      trigger: 'manual'
    }).live('click', function(e){
      e.preventDefault();
      $(this).popover('show');
    });
  
  });
  </code></pre>
  
  <p>The table HTML is like this (see the link at the end):</p>
  
  <pre><code>&lt;table class="zebra-striped align-middle" data-type="invoices"&gt;
    &lt;colgroup&gt;
      &lt;col /&gt;
      &lt;col /&gt;
      &lt;col class="date" /&gt;
      &lt;col class="date" /&gt;
      &lt;col class="status" /&gt;
      &lt;col class="currency" /&gt;
      &lt;col class="currency" /&gt;
      &lt;col class="payments" /&gt;
    &lt;/colgroup&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;{% trans %}Number{% endtrans %}&lt;/th&gt;
        &lt;th&gt;{% trans %}Customer{% endtrans %}&lt;/th&gt;
        &lt;th&gt;{% trans %}Date{% endtrans %}&lt;/th&gt;
        &lt;th&gt;{% trans %}Due Date{% endtrans %}&lt;/th&gt;
        &lt;th&gt;{% trans %}Status{% endtrans %}&lt;/th&gt;
        &lt;th&gt;{% trans %}Due{% endtrans %}&lt;/th&gt;
        &lt;th&gt;{% trans %}Total{% endtrans %}&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;ASET-22&lt;/td&gt;
        &lt;td&gt;Roxxon&lt;/td&gt;
        &lt;td&gt;5/28/11&lt;/td&gt;
        &lt;td&gt;9/16/11&lt;/td&gt;
        &lt;td&gt;
          &lt;span class="label important"&gt;{% trans %}overdue{% endtrans %}&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;$11,435.23&lt;/td&gt;
        &lt;td&gt;
          &lt;a href="{{ path('invoice_payments', { 'invoiceId': 4 }) }}" class="btn secondary icon clock payments" title="Payments"&gt;{% trans %}Payments{% endtrans %}&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>If I remove the "manual" trigger it works but if I set it, it doesn't.</p>
  
  <p>Anyone knows how to do this? Thanks!</p>