Angular UI Tooltip overflowing screen
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.
I had to do a couple of things to get my popover to "work" using uib-popover-template
- Add the
popover-append-to-body="true"
attribute.- This appends popover to
$body
instead of the parent element
- This appends popover to
- Add the
popover-placement="auto top"
attribute.- It will try to display top, otherwise attempts a more user-friendly placement.
- I tried with
auto top-left
but it seems to squish very large amounts of text.
- Wrapped content in a
<div style="max-height: 300px; overflow: auto;">
- This put a boundary on the container and will add scrolling only when necessary.