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:

enter image description here

How can I style change the width of this popover?

angular-ui bootstrap directive having directive binding variable "**uib-tooltip-classes**" ,The class name which passed to **uib-tooltip-classes** will appened to your popup parent container when its open. — BALA, Dec 28 '16 at 16:57

score 32 · Answer 1 · answered Nov 09 '16 at 09:29

32

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

answered Nov 09 '16 at 09:29

Sudarsan GP

1,194
14
22

popover-class doesn't work for me but I have very old bootsrap ui version (0.12.1) and this is the reason. I should update it to at least 0.13.0 because as documentation states from this version popover-class is respected: [https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md](https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md) – luke Jan 04 '18 at 13:43
What is more bootstrap ui 0.13.x needs angular 1.3.x – luke Jan 04 '18 at 14:03

score 18 · Accepted Answer · answered Mar 12 '15 at 08:57

18

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

answered Mar 12 '15 at 08:57

In my experience, when you change this property in the devtools, it will properly change. But when it's changed in the .css file associated with my angular project, the change is ignored. – Shad Sep 10 '21 at 19:47

score 9 · Answer 3 · answered Feb 18 '16 at 20:26

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

score 5 · Answer 4 · answered Aug 27 '15 at 19:42

5

For me the following worked

.popover {
    max-width: 450px;
}

This actually changed the size of the popover white container.

answered Aug 27 '15 at 19:42

sakura-bloom

4,524
7
46
61

score 1 · Answer 5 · answered Mar 12 '15 at 09:24

1

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

answered Mar 12 '15 at 09:24

okanozeren

555
4
10

score 0 · Answer 6 · answered Mar 12 '15 at 08:58

0

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

.popover {
    width: 200px;
}

answered Mar 12 '15 at 08:58

Catalin MUNTEANU

5,618
2
35
43

score 0 · Answer 7 · answered Dec 29 '20 at 20:34

0

<style>
    .popover {
        width: 500px;
        max-width: 500px;
    }
</style>

In my case both parameters was important and took effect

answered Dec 29 '20 at 20:34

slava198

1
2

UI Bootstrap Popover: change width

7 Answers7

Linked