如何让 ui-bootstrap popover 在浮动中表现？答案

【问题标题】：How to get ui-bootstrap popover to behave in float?如何让 ui-bootstrap popover 在浮动中表现？
【发布时间】：2015-03-29 12:27:43
【问题描述】：

当我将 angularjs ui-bootstrap 弹出框放在使用 css 浮动的按钮上时，弹出框会混淆显示自身的位置以及它有多少空间。

这是一个非常 simple plunker，它说明了一个这样的例子。请注意，它试图将自己显示在按钮的正上方，因此闪烁进出。

<button class="btn" style="float:right"
  popover="A longer popover text illustrates the problem more clearly" 
  popover-trigger="mouseenter" popover-placement="left">
    Button Text
</button>

任何放置都存在问题，所有这些问题都源于对实际显示弹出框的位置的不同错误计算。

有谁知道如何克服这个问题？

【问题讨论】：

标签： css angular-ui-bootstrap popover

【解决方案1】：

第一步涉及为.tooltip 和.tooltip-inner 设置固定宽度，例如，

.btn + .tooltip {
  width: 200px;
}

.btn + .tooltip > .tooltip-inner {
  width: 190px;
}

（见https://github.com/angular-ui/bootstrap/issues/5746#issuecomment-362915139。）

此外，要使此修复生效，您需要将 uib-bootstrap 至少升级到 v0.12.1

Plunker

【讨论】：