Changing the width of twitter bootstrap popover

Question 1

You can change the popover's dimensions with CSS:

.popover{
    width:200px;
    height:250px;    
}

But that CSS will change ALL popovers. What you need to do is put the button in a container element and use CSS like this:

#containerElem .popover {
  width:200px;
  height:250px;
  max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}

You also need to change data-container="#containerElem" to match your container.

NOTE: If your popover is going to have a width greater than 276px, you need to override the max-width property as well. So add max-width: none to the .popover {} class.

Here's a jsFiddle: http://jsfiddle.net/4FMmA/

Question 2

If you want to controle the width in javascript:

HTML (example from Bootstrap)

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

Javascript:

We set the max-width when show.bs.popover event is triggered:

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

You can also add a data-max-width attribute on the button element and get the value in the trigger function:

p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});

Question 3

.popover{
    max-width: 100%;
    width: <width>;
}

The 'max-width' sets max-width of popover to the width of the page. You can then set the width as you like

Question 4

You can adjust the width of the popover, but the best thing to do is to define the width of the content before Bootstrap sees is. For instance, I had a table, I defined it's width, then bootstrap built a popover to suit it. (Sometimes Bootstrap has trouble determining the width, and you need to step in and hold its hand)

Question 5

I might have an easier solution:

Add the following css class:

.app-popover-fw { width: 276px; }

Use the following template for your popover

var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' +
                             '<div class="arrow"></div>'+ 
                             '<h3 class="popover-title"></h3>'+
                             '<div class="popover-content"></div>'+
                          '</div>';

$('#example').popover({template: newPopoverTemplate });`

Working fiddle: http://jsfiddle.net/b5Ly2ynd/

NB: As others said, there is a "max-width" property on bs popovers. You need to alter this one if you want your popover larger than 276px.

Question 6

Use this code . It will work fine:

  .popover{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-word;
    }

Question 7

I used the following code:

.popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre;
      width: 600px;
    }

Question 8

Another option is to use custom template like (added only additional class: popover-lg):

<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

Then in css:

.popover-lg {
    max-width: 100%;
}

Invocation:

$(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: '...',
    });

This way it is clean and doesn't interfere original bootstrap behavior.

Question 9

You can achieve that in two ways, one is by reducing the font-size for class 'popover' and the other is by reducing the padding in class 'popover-content'. Here is how I achieved it,

.popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}

Question 10

You can use CSS to increase the width of your popover.

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Question 11

The best method I have found to affect the popover properties without directly overriding them in a CSS override class, is to use the container attribute when instantiating the popover, then using a complex selector to override the properties, thereby keeping the original properties for any other popovers you may want in some other area of your site.

Simply overriding max-width in the .popover will work of course, but then you have to live with that override for everything, essentially defeating the purpose.

What I do is set the container of my popover to the container of the triggering element, then creating a complex CSS class like .container > .popover that sets the max-width the popover only for that instance.