BootstrapUI：弹出窗口被页面结束截断

Question

这些是 AngularUI Bootstrap 弹出框，它们是用 Angular 而不是 jQuery 编写的。

我在 plnkr 中有一个弹出框，它正在工作，但它的定位搞砸了。它被页面切成两半。

当我检查弹出框的 CSS 时，我看到一些对我来说没有任何意义的代码。我知道它在做什么，但是这些 element.style 属性来自哪里？他们似乎是问题所在。

element.style {
  top: -139px;
  left: 112px;
  display: block;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  line-break: auto;
}

甚至没有可用的滚动选项。有没有办法定位一个弹出框，使其全部显示在页面上，而不管按钮在哪里？

Answer 1

在要显示弹出框的元素中，添加以下指令：

popover-append-to-body="true"

像这样：

<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
    [{{form.status}}]
</small>

Answer 2

元素样式在 UI Bootstrap 的tooltip 部分的source 中设置。

工具提示和弹出框并不意味着存储那么多数据，这就是为什么它们只是将其放在它所附加的元素上。

---

编辑

对于这个特定示例，您可以添加以下 CSS：

.popover-parent + .popover {
    top: 0 !important;
}

.popover-parent + .popover .arrow {
    top: 15px !important;
}

最动态的方法是挂钩显示工具提示的事件，然后计算弹出框的位置。