首页 文章

Shift bootstrap popover

提问于
浏览
0

我在引导程序面板中有一个输入元素 . 我想在面板外部显示输入元素的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;
}

小提琴:https://jsfiddle.net/DTcHh/10430/(取消注释js以查看所需结果)

为了做到这一点,我想将popover元素向左移动 . 我尝试这样做,如下所示:Bootstrap Popover arrow and box positioning但这会导致弹出窗口在显示时从原始位置跳转到新位置 . (出于某种原因,这不会发生在小提琴上,当我在我的服务器上运行代码时会发生这种情况) .

我可以在stackoverflow上找到我想要做的一个例子 . 当您单击“添加注释”并且没有足够的信誉点时,将显示工具提示 . 但是,它不是直接显示在元素的右侧/底部/左侧/顶部,而是显示在右侧:

popover far right example

关于如何实现改变弹出窗口位置的效果,有什么建议吗?谢谢 .

1 回答

  • 0

    从js代码中删除 + "px" .

    下面的代码片段应该可行 .

    $("#text_input").on("shown.bs.popover", function(){
    
          $(".popover").css("left", 
          parseInt($(".popover").css("left")) - 20);
    
    });
    

    演示:https://jsfiddle.net/DTcHh/10432/

相关问题