title: Correct way to implement bootstrap popover with ajax request
body: <p>Trying to implement Bootstrap's popover which will appear after response for AJAX request will be received.</p>
  
  <p>Here is HTML code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
          &lt;h4&gt;
              &lt;strong&gt;Sorted laptops:&lt;/strong&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 col-md-offset-7"&gt;
          &lt;button class="btn btn-info pull-right" data-loading-text="Generating link to share, please wait..." id="share_results"&gt;Share results&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is JS code:</p>
  
  <pre><code>$('#share_results').click(function(event) {
      var $share_results, delimiter, descriptions, query;
      $share_results = $(this);
      $share_results.button('loading');
      descriptions = $.map($('td.laptop_desc'), function(val) {
          return $(val).text().trim().replace(/\s{2,}/g, ' ');
      });
      delimiter = $('#delimiter').val();
      query = descriptions.join(' ' + delimiter + '\n\n');
      $.post('/path', {
          'query': query,
          'delimiter': delimiter
      }, function(resp) {
          var content, hash, url;
          $share_results.button('reset');
          hash = resp['hash_string'];
          url = window.location.origin + window.location.pathname + '?q=' + hash;
          content = "&lt;input class='form-control input-sm' value='" + url + "'&gt;";
          return $share_results.popover({
          container: '.container',
          html: true,
          delay: 500,
          placement: 'left',
          'content': content
          }).popover('show');
      });
  });
  </code></pre>
  
  <p>No CSS changes were made.</p>
  
  <p>Initial button state:</p>
  
  <p><img src="https://i.stack.imgur.com/hU45c.png" alt="Initial button state"></p>
  
  <p>State after request is received:</p>
  
  <p><img src="https://i.stack.imgur.com/Oz4Oj.png" alt="State after request is received"></p>
  
  <p>Here I am having two problems:</p>
  
  <ul>
  <li>popover always on top - doesn't disappear</li>
  <li>popover width is too small </li>
  </ul>
  
  <p>How to fix that?</p>