Question

我有一个带有状态通知的工具提示（http://angular-ui.github.io/bootstrap/），但是当此通知很大时，它会溢出屏幕限制。这里是正在发生的事情的印刷品：

我无法在角度ui中找到任何处理此问题的属性。

提前感谢！

Answer 1

此解决方案不使用Angular-UI，只使用Angular和Bootstrap。 Bootstrap不一定是必需的，只是稍微简化了一下过程：
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

在进一步说明之前，此示例的替代方法是向工具提示类添加具有word-wrap和white-space属性的CSS类。使用Chrome或Firefox的开发人员工具，检查元素，直到找到负责设置工具提示ui的类;然后在style.css自定义CSS文档中将这些属性添加到它们。

现在，针对此特定解决方案，我们创建了一个工具提示指令，并允许它采用展示位置属性来确定定位

Angular代码，我们在完成防止内存泄漏后销毁工具提示：

var app = angular.module('test', []);

angular.module('test').directive('tooltip', function () {
           return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                 $(element)
                         .attr('title', attrs.tooltip)
                         .tooltip({placement: attrs.placement});
                 scope.$on('$destroy', function() {
                    element.tooltip('destroy');
                 });
              }
           }
        })

CSS代码，我们必须覆盖一些Bootstrap默认值：

.tooltip-inner {
   width: auto;
   min-width: 180px;
   background-color: #c0d3d2;
   color: #000000;
   font-weight: 600;
   margin: 0 5px 0 -5px;
   /*margin-left: -5px;*/
}

/* Make tooltips opaque */
.tooltip.in { opacity: 1.8; filter: alpha(opacity=100); }
/*Change tooltip arrow color for bottom placement*/
.tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-bottom-color: #c0d3d2;
   border-width: 0 5px 5px;
}

Answer 2

我怀疑popover是从它所在的容器继承一些定位信息。尝试设置popover-append-to-body，使其不再在该容器中。

当前版本的Angular UI中存在一个错误，因此您实际上必须设置：

popover-append-to-body="true"

但是，这将在下一个版本中修复，因此您不需要=“true”部分，只需设置属性。

Answer 3

我必须做几件事，才能使用 uib-popover-template

使弹出式窗口“正常工作”

添加popover-append-to-body="true"属性。
- 这会将弹出框附加到$body而不是父元素上
添加popover-placement="auto top"属性。
- 它将尝试显示顶部，否则将尝试使用更加用户友好的位置。
- 我尝试使用auto top-left，但它似乎压缩了大量文本。
将内容包装在<div style="max-height: 300px; overflow: auto;">中
- 这在容器上设置了边界，并且仅在必要时添加滚动。

Angular UI Tooltip溢出屏幕

3 个答案: