Bootstrap popover移位

Question

如何通过bootstrap popover实现以下功能：

​

​

其中弹出显示在被触发的元素的最右侧。小提琴：https://jsfiddle.net/DTcHh/10435/我想要面板外的popover。

(使用javascript)更新popover css的left (或其他位置)规则没有任何帮助，因为当popover显示时，它会被覆盖。如果我更改了shown.bs.popover事件的位置，那么原始位置将显示几毫秒。

谢谢。

Answer 1

你可以在css中使用!important覆盖弹出窗口的位置。这可能不是一个非常优雅的解决方案，但它是有效的。

.panel-body .popover {
    left: 20px !important;
}

检查以下代码片段：

​

$(document).ready(function(){

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

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

.panel-body .popover {
    left: 20px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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>

​