使用ajax请求实现bootstrap popover的正确方法

Question

尝试实现Bootstrap的弹出窗口，该弹出窗口将在收到AJAX请求的响应后出现。

这是HTML代码：

<div class="row">
    <div class="col-md-3">
        <h4>
            <strong>Sorted laptops:</strong>
        </h4>
    </div>
    <div class="col-md-2 col-md-offset-7">
        <button class="btn btn-info pull-right" data-loading-text="Generating link to share, please wait..." id="share_results">Share results</button>
    </div>
</div>

这是JS代码：

$('#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 = "<input class='form-control input-sm' value='" + url + "'>";
        return $share_results.popover({
        container: '.container',
        html: true,
        delay: 500,
        placement: 'left',
        'content': content
        }).popover('show');
    });
});

没有进行任何CSS更改。

初始按钮状态：

收到请求后的状态：

我有两个问题：

• popover始终位于顶部 - 不会消失
• popover width太小

如何解决这个问题？