javascript - Angular UI 工具提示溢出屏幕

Question

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

我在 angular ui 中找不到任何处理这个问题的属性。

提前致谢!

Answer 1

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

在我继续之前，这个例子的替代方法是添加一个带有 word-wrap 的 CSS 类。和 white-space工具提示类的属性。使用 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;
}