Angular UI Tooltip Überlauf Bildschirm

Question

Ich habe eine QuickInfo (http://angular-ui.github.io/bootstrap/) mit einer Statusbenachrichtigung, aber wenn diese Benachrichtigungen zu groß ist, überläuft es die Bildschirmgrenzen. hier ist ein Druck, was passiert:

ich kein Attribut in Winkel ui, die mit diesem Problem beschäftigt sich finden konnten.

danke im voraus!

Answer 1

Diese Lösung verwendet keine Angular-UI, nur Angular und Bootstrap. Bootstrap ist nicht unbedingt erforderlich, vereinfacht nur den Prozess ein wenig:
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

Bevor ich weiter gehen, eine Alternative zu diesem Beispiel einer CSS-Klasse mit word-wrap und white-space Objekten zu Ihrer Tooltip Klasse hinzuzufügen wäre. Untersuchen Sie die Elemente mit dem Entwicklerwerkzeug von Chrome oder Firefox, bis Sie die Klassen gefunden haben, die für das Setzen des Tooltips zuständig sind. Fügen Sie diese Eigenschaften dann in Ihrem benutzerdefinierten CSS-Dokument style.css hinzu.

Nun, für diese spezielle Lösung erstellen wir eine Tooltip-Richtlinie und lassen Sie es ein Placement-Attribut nehmen

Winkelcode bestimmen zu positionieren, wo wir den Tooltip zu zerstören, nachdem wir ein Speicherleck sind getan zu verhindern:

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, wo wir einige der Bootstrap Standardwerte außer Kraft setzen müssen:

.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

ich vermute, die popover so erbt Ich positioniere Informationen aus dem Container, in dem es sich befindet. Versuchen Sie popover-append-to-body so einzustellen, dass es sich nicht mehr in diesem Container befindet.

Es ist ein Fehler in der aktuellen Version von Angular UI, so dass Sie tatsächlich eingestellt haben:

popover-append-to-body="true" 

Aber, die auf der nächsten Version behoben werden, so dass Sie das nicht brauchen = "true "Teil, setze einfach das Attribut.