UI Bootstrap Popover: zmiana szerokości

Question

Próbuję użyć popovers z UI Bootstrap w angularjs: http://angular-ui.github.io/bootstrap/#/popover

<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i> 

Daje mi popover takiego:

Jak czy mogę zmienić szerokość tego popover?

Answer 1

Można to osiągnąć poprzez nadpisanie popover-content Klasa:

.popover-content { 
width: 200px; 
} 

UPDATE: Można to sprawdzić w Chrome: - naciśnij F12 - wybierz lupa - kliknij na element do skontrolować - modyfikować jej styl

Answer 2

szerokość można łatwo zmienić poprzez nadpisanie .popover:

.popover { 
    width: 200px; 
} 

Answer 3

Czy spróbować atrybut popover-append-do-ciała komponentu popover?

Answer 4

Dla mnie dodaje pracował

.popover { 
    max-width: 450px; 
} 

To faktycznie zmienił rozmiar popover białym kontenerze.

Answer 5

Innym rozwiązaniem, jeśli masz bardzo szeroki popovers ma pozwolić im na automatyczną zmianę rozmiaru

Wystarczy ustawić css tak być

.popover { 
    max-width: 800px; /* optional max width */ 
    width: intrinsic; /* Safari/WebKit uses a non-standard name */ 
    width: -moz-max-content; /* Firefox/Gecko */ 
    width: -webkit-max-content; /* Chrome */ 
} 

Answer 6

od docs można użyć

Atrybut popover-class - klasa niestandardowa do zastosowania w popover

<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i> 

W swoim arkuszu stylów

.increase-popover-width { 
    max-width: 400px; 
} 

Powodem ustawienia max-width zamiast width że bootstrap ma popover-max-width zestaw jako 276px.

github bootstrap code