Question

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

虽然，我需要稍微移动此弹出窗口约10px（顶部值+ 10px），以便用户可以轻松地将鼠标移动到弹出窗口。目前，将鼠标移动到弹出窗口的唯一方法是使用弹出窗口下面的小箭头。

以下是一个例子：

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
}

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

1 个答案: