BootstrapUI：弹出切断页面结束

Question

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

我在plnkr中有一个正常工作的弹出窗口，但它的定位搞砸了。它被页面缩小了一半。

当我检查popover的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

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

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

<强> 修改

对于此特定示例，您可以添加此CSS：

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

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

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