Angular UI Tooltip overflowing screen
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;
}
I suspect the popover is inheriting some positioning information from the container it's in. Try setting popover-append-to-body so that it's not in that container any longer.
There is a bug in the current release of Angular UI, so you actually have to set:
popover-append-to-body="true"
But, that will be fixed on the next release so you don't need the ="true" part, just set the attribute.
链接地址: http://www.djcxy.com/p/80128.html上一篇: 我如何获得副本