9

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:

enter image description here

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

thanks in advance!

Mosh Feu
  • 24,625
  • 12
  • 74
  • 111
jgabrielfaria
  • 1,223
  • 3
  • 14
  • 19
  • Can you make a Plunker? I just tried and my long tooltip automagically word wrapped to multiline and fit fine on the screen. – lmyers Jun 25 '14 at 17:13
  • Proof this issue is still relevant: Angular-ui's own demo: http://plnkr.co/edit/3CrirzusD5ONSdIjnX4A click the `"Or use custom triggers, like focus:"` box. If the screen is small enough, this tooltip hangs off the right. Angular ui's bootstrap does not have position:auto. The tooltips have a max-width, but they are not being prevented from hanging off the page. Fix is needed. – Augie Gardner Jul 28 '14 at 21:21

3 Answers3

3

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;
}
Boris
  • 566
  • 5
  • 18
3

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.

Mosh Feu
  • 24,625
  • 12
  • 74
  • 111
Arthur G N McLean
  • 123
  • 1
  • 9
1

I had to do a couple of things to get my popover to "work" using uib-popover-template

  1. Add the popover-append-to-body="true" attribute.
    • This appends popover to $body instead of the parent element
  2. 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.
  3. 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.
Gabe Gates
  • 586
  • 5
  • 19