dhrm dhrm - 1 month ago 16
AngularJS Question

UI Bootstrap Popover: change width

I'm trying to use the popovers from UI Bootstrap in 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>


It gives me a popover like this:

enter image description here

How can I style change the width of this popover?

Answer

You can achieve it by overriding popover-content class:

.popover-content {
width: 200px;
}

UPDATE: You can check this in Chrome: - press F12 - select the magnifier - click on the element to inspect - modify its style enter image description here