如何让 ui-bootstrap 弹出窗口以浮动方式运行？

Question

当我将 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>

任何位置都存在问题，所有这些问题都源于对实际显示弹出窗口的位置的各种错误计算。

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

Answer 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

如何让 ui-bootstrap 弹出窗口以浮动方式运行？

How to get ui-bootstrap popover to behave in float?

css

popover

angular-ui-bootstrap