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

Question

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

这是一个非常 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