angularjs - UI Bootstrap Popover: change width

Question

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:

How can I style change the width of this popover?

Answer 1

From the docs you can use the

popover-class attribute - Custom class to be applied to the 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>

In your style sheet

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

The reason for setting max-width instead of width is that bootstrap has popover-max-width set as 276px.

github bootstrap code