Angular UI Tooltip Overflow Screen

Question

I have a tooltip ( http://angular-ui.imtqy.com/bootstrap/ ) with a status notification, but when these notifications are large, it overflows the screen limitations, here is an imprint of what happens:

I could not find any attribute in angular ui that handles this problem.

early!

Answer 1

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

Before moving on, an alternative to this example would be to add a CSS class with word-wrap and white-space for your tooltip class. Using the Chrome or Firefox developer tool, check the items until you find the classes responsible for customizing the ui tooltip; then add these properties to your own style.css CSS document.

Now, for this particular solution, we create a tooltip directive and let it accept the placement attribute to determine the positioning

Angular, 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 where we have to override some default values ​​for 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; } 

Answer 2

I suspect that popover inherits some location information from the container in which it is located. Try installing popover-append-to-body so that it is no longer in this container.

There is a bug in the current release of Angular, so you really need to install:

 popover-append-to-body="true" 

But this will be fixed in the next release, so you do not need the "true" part, just set the attribute.