Angular UI Tooltip溢出屏幕
我有一个带有状态通知的工具提示（http://angular-ui.github.io/bootstrap/），但是当这个通知很大时，它溢出了屏幕限制。 这里是正在发生的事情的一个打印：
我找不到处理这个问题的角度UI中的任何属性。
提前致谢！
此解决方案不使用Angular-UI，只使用Angular和Bootstrap。 Bootstrap不一定是必需的，只是简化了一下过程：
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview
在我进一步讨论之前，这个例子的一个替代方案是将一个带有自动换行和空白属性的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;
}
我怀疑popover从它所在的容器继承了一些定位信息。尝试设置popover-append-to-body以便它不在该容器中。
目前版本的Angular UI存在一个错误，所以你实际上必须设置：
popover-append-to-body="true"
但是，这将固定在下一个版本上，因此您不需要=“true”部分，只需设置属性即可。
链接地址: http://www.djcxy.com/p/80127.html