Angolare UI Tooltip schermo overdrowing

Question

Ho un suggerimento (http://angular-ui.github.io/bootstrap/) con una notifica di stato, ma quando questa notifica è troppo grande, trabocca i limiti dello schermo. qui è una stampa di ciò che sta accadendo:

non ho potuto trovare qualsiasi attributo in ui angolare che si occupa di questo problema.

grazie in anticipo!

Answer 1

Questa soluzione non utilizza Angular-UI, solo Angular e Bootstrap. Bootstrap Non è necessariamente richiesto, solo semplifica il processo un po ':
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

Prima di andare avanti, in alternativa a questo esempio sarebbe quello di aggiungere una classe CSS con word-wrap e white-space proprietà per la classe tooltip. Utilizzando lo strumento di sviluppo di Chrome o Firefox, ispeziona gli elementi fino a individuare le classi responsabili per l'impostazione del tooltip ui; quindi aggiungi queste proprietà a loro nel tuo documento CSS personalizzato style.css.

Ora, per questa particolare soluzione, creiamo una direttiva tooltip e permettere di prendere un attributo di collocamento per determinare il posizionamento

codice angolare, in cui distruggiamo il tooltip dopo abbiamo finito per impedire una perdita di memoria:

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'); 
       }); 
       } 
      } 
     }) 

codice CSS, dove dobbiamo ignorare alcune delle impostazioni predefinite 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

ho il sospetto che la popover eredita così mi posiziono le informazioni dal contenitore in cui si trova. Prova a impostare popover-append-to-body in modo che non sia più in quel contenitore.

C'è un bug nella versione corrente di angolare interfaccia utente, in modo che effettivamente necessario impostare:

popover-append-to-body="true" 

Ma, che verrà fissato sulla prossima release in modo non è necessario l'= "true "parte, basta impostare l'attributo.