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

For me the following worked

.popover {
    max-width: 450px;
}

This actually changed the size of the popover white container.

Answer 2

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

Answer 3

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

Answer 4

Another solution if you have very wide popovers is to allow them to autosize

Just set your css to be like this

.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 5

The width can be changed easily by overriding the .popover:

.popover {
    width: 200px;
}

Answer 6

Did you try the popover-append-to-body attribute of the popover component?