Angular UI Tooltip 溢出屏幕

Posted 2023-02-22

技术标签:

【中文标题】Angular UI Tooltip 溢出屏幕【英文标题】：Angular UI Tooltip overflowing screen 【发布时间】：2014-08-16 08:37:00 【问题描述】：

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

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

提前致谢！

【问题讨论】：

你能做一个 Plunker 吗？我刚刚尝试过，我的长工具提示会自动将文字换成多行并很好地显示在屏幕上。证明这个问题仍然相关：Angular-ui 自己的演示：plnkr.co/edit/3CrirzusD5ONSdIjnX4A 点击"Or use custom triggers, like focus:" 框。如果屏幕足够小，则此工具提示会挂在右侧。 Angular ui 的引导程序没有位置：自动。工具提示有一个最大宽度，但不会阻止它们挂在页面上。需要修复。 【参考方案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;

【讨论】：

【参考方案2】：

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

当前版本的 Angular UI 有一个 bug，所以你实际上必须设置：