Changing the width of twitter bootstrap popover
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/
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.
.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
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});
});