Shift Bootstrap Popover

问题描述

我在引导面板中有一个输入元素。 我想在面板外部显示输入元素的引导弹出窗口。

我的html：

<div class="panel">
    <div class="panel-body">
        <input type="text" id="text_input" data-toggle="popover"
        data-content="blah" data-trigger="focus" data-placement="left"/>
    </div>
</div>

我的js：

$(document).ready(function(){

    $("[data-toggle='popover']").popover();

    /*
    $("#text_input").on("shown.bs.popover", function(){

          $(".popover").css("left", 
          parseInt($(".popover").css("left")) - 20 + "px");

      });
    */
});

我的CSS：

.panel {
    width:50%;
    margin-left: auto;
    margin-right: auto;
}

小提琴： ： （取消注释js以查看所需结果）

为此，我想将popover元素向左移动。 我尝试按照此处概述的方法进行操作： 但这会导致在显示时从原始位置跳到新位置。 （由于某种原因，这不会在小提琴上发生，而是在我的服务器上运行代码时发生的）。

我想做的一个例子可以在stackoverflow上找到。 当您单击“添加评论”并且没有足够的信誉点时，将显示工具提示。 但是，它不是直接显示在元素的右/下/左/顶部，而是显示在最右侧：

关于如何实现移动弹出窗口位置的效果，有什么建议吗？ 谢谢。