Javascript 角度UI工具提示溢出屏幕

我有一个带有状态通知的工具提示（），但是当这个通知太大时，它会超出屏幕限制。以下是正在发生的事情：

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

---

提前谢谢

此解决方案不使用Angular UI，只使用Angular和引导。不一定需要引导，只是简化了一点过程：

在我进一步讨论之前，这个示例的另一个替代方法是向工具提示类添加一个带有和属性的CSS类。使用Chrome或Firefox的开发者工具，检查元素，直到找到负责设置工具提示ui的类；然后将这些属性添加到style.css自定义css文档中

现在，对于这个特定的解决方案，我们创建了一个工具提示指令，并允许它使用放置属性来确定位置

角度代码，在防止内存泄漏后销毁工具提示：

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代码，其中我们必须覆盖一些引导默认值：

.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;
}

---

我怀疑popover从它所在的容器中继承了一些定位信息。尝试设置

popover append to body

，使其不再位于该容器中

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

popover-append-to-body="true"

---

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

我必须做几件事才能使用使我的popover“工作”

添加

popover append to body=“true”

属性。

• 这会将popover附加到

  $body

  而不是父元素

添加

popover placement=“auto top”

属性。

• 它将尝试显示顶部，否则将尝试更方便用户的放置
• 我尝试了

  自动左上

  ，但它似乎挤压了大量文本

将内容包装在

• 这将在容器上放置一个边界，并仅在必要时添加滚动

---

你能做一个扑克牌吗？我刚刚尝试过，我的长工具提示自动将word包装成多行，并在屏幕上显示良好。证明此问题仍然相关：Angular ui自己的演示：单击

”或使用自定义触发器，如焦点：“

框”。如果屏幕足够小，此工具提示将挂起在右侧。Angular ui的引导没有位置：auto。工具提示具有最大宽度，但不会阻止它们挂在页面上。需要修复。通过将

工具提示附加到body=“true”

，这对我有效。