UI Bootstrap Popover: change width

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 */
}

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

For me the following worked

.popover {
    max-width: 450px;
}

This actually changed the size of the popover white container.

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