我在引导程序面板中有一个输入元素 . 我想在面板外部显示输入元素的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上找到我想要做的一个例子 . 当您单击“添加注释”并且没有足够的信誉点时,将显示工具提示 . 但是,它不是直接显示在元素的右侧/底部/左侧/顶部,而是显示在右侧:
关于如何实现改变弹出窗口位置的效果,有什么建议吗?谢谢 .
1 回答
从js代码中删除
+ "px"
.下面的代码片段应该可行 .
演示:https://jsfiddle.net/DTcHh/10432/