javascript - 如何将 Bootstrap Popover 的位置下移？

Question

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

尽管如此，我需要将此弹出窗口稍微向下移动大约 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
}