Angular UI 工具提示溢出屏幕

问题描述

我有一个工具提示(

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

提前致谢！

解决方案

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

在我继续之前，这个例子的替代方法是添加一个带有 word-wrap 和 white-space 属性到您的工具提示类.使用 Chrome 或 Firefox 的开发者工具，检查元素，直到找到负责设置工具提示 ui 的类；然后将这些属性添加到 style.css 自定义 CSS 文档中.

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

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

var app = angular.module('test', []);angular.module('test').directive('tooltip', function () {返回 {限制:'A'，链接:函数(范围、元素、属性){$(元素).attr('title', attrs.tooltip).tooltip({placement: attrs.placement});scope.$on('$destroy', function() {element.tooltip('销毁');});}}})

CSS 代码，我们必须在其中覆盖一些 Bootstrap 默认值:

.tooltip-inner {宽度:自动；最小宽度:180px；背景颜色:#c0d3d2；颜色:#000000；字体粗细:600；边距:0 5px 0 -5px；/* 左边距:-5px;*/}/* 使工具提示不透明 */.tooltip.in { 不透明度:1.8;过滤器:alpha(不透明度=100)；}/*更改底部放置的工具提示箭头颜色*/.tooltip.bottom .tooltip-arrow {顶部:0；左:50%；左边距:-5px；边框底部颜色:#c0d3d2；边框宽度:0 5px 5px；}

I have a tooltip (http://angular-ui.github.io/bootstrap/) with a status notification, but when this notifications is to large, it overflows the screen limits. here is a print of what is happening:

I couldn't find any attribute in angular ui that deals with this problem.

thanks in advance!

解决方案

This solution does not use Angular-UI, just Angular and Bootstrap. Bootstrap is not necessarily required, just simplifies the process a bit:
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

Before I go any further, an alternative to this example would be to add a CSS class with word-wrap and white-space properties to your tooltip class. Using Chrome or Firefox's developer tool, inspect the elements until you locate the classes responsible for setting the tooltip ui; then add these properties to them in your style.css custom CSS document.

Now, for this particular solution, we create a tooltip directive and allow it to take a placement attribute to determine positioning

Angular code, where we destroy the tooltip after we are done to prevent a memory leak:

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 Code, where we have to override some of the Bootstrap defaults:

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

这篇关于Angular UI 工具提示溢出屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！