如何将 Bootstrap Popover 的位置向下移动？

Question

所以基本上我有一个 Boostrap 弹出框，它是在父级内部创建的，用于悬停。这样，用户可以启动弹出框，然后还可以将鼠标悬停在弹出框上方和周围以单击其中的链接。

尽管如此，我需要将此弹出框稍微向下移动大约 10 像素（顶部值 + 10 像素），以便用户可以轻松地将鼠标移动到弹出框。目前，将鼠标移动到弹出框的唯一方法是按照弹出框下方的小箭头。

这是一个例子：

jQuery：

$('td.chartSection').each(function () {
    var $thisElem = $(this);
    $thisElem.popover({
        placement: 'auto',
        trigger: 'hover',
        html: true,
        container: $thisElem,
        animation: true,
        title: 'Name goes here',
        content: 'This is the popover content. You should be able to mouse over HERE.'
    });
});

HTML：

<table>
    <tr>
        <td class="chartSection">Chart 1</td>
    </tr>
    <tr>
        <td class="chartSection">Chart 2</td>
    </tr>
    <tr>
        <td class="chartSection">Chart 3</td>
    </tr>
</table>

我尝试过的：

我尝试使用 Bootstrap 提供的事件在加载后为弹出框提供不同的top 位置。虽然，当悬停在弹出框上时，您可以清楚地看到它在移动，这看起来很糟糕。示例：

$('td.chartSection').on('shown.bs.popover', function () {
    var $thisElem = $(this).find('.popover');
    var theTop = $thisElem.css('top');
    theTop = parseInt(theTop);
    $thisElem.css('top', (theTop + 10) + 'px');
});

WORKING DEMO

Answer 1

很简单：

演示 http://jsfiddle.net/d9qJQ/1/

.chartSection .popover {
    margin-top:10px; //or any value that you want
}