Bootstrap popover移位

Question

如何使用bootstrap popover实现以下功能：

弹出窗口显示在触发元素的最右侧。 小提琴：https://jsfiddle.net/DTcHh/10435/ 我想在小组外面使用popover。

更新popover css的left（或其他位置）规则（使用javascript）没有帮助，因为在显示弹出窗口时会覆盖它。 如果我更改shown.bs.popover事件的位置，则原始定位会显示几毫秒。

谢谢。

Answer 1

你可以在css中使用！important来覆盖popover的定位。可能不是一个非常优雅的解决方案，但它的工作原理。

.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>