Bootstrap中popover位置调整和使用实例

弹出框插件的简单教程：http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html  

现有一个表格，表格每一行有button，希望点击删除的button后出现弹出框询问是否删除，先上效果图：

 

bootstrap popover插件本身提供了placement选项，可以对弹出框的显示位置进行选择，我这里选的bottom：

placement

string|function 默认值：top

data-placement

规定如何定位弹出框（即 top|bottom|left|right|auto）。 当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

 弹出框内容设置为：

删除

因为我的删除按钮是在下拉菜单中，我遇到的问题是，点击删除后，弹出框总是出现在删除按钮下方，希望能够指在【更多】按钮上，百度出来的结果是可以css设置.popover覆盖bootstrap的默认样式，例： http://www.php.cn/js-tutorial-410137.html 

我尝试设置了.popover

.popover{
    top: -10px !important;
    background: red;
}

top不加 !important的话是无效的，但加了之后发现这是相对于的布局，不是相对于触发它的按钮。

最终发现了可以设置另一个属性

.popover.bottom {
    margin-top: -50px;
}

弹出框顺利相对于删除按钮上移，指向更多按钮。

Tip：

我这里displacement选的是buttom，所以设置 .bottom，如果是其他比如left，相应的应该设置 .popover.left