Changing the width of Bootstrap popover
I also needed a wider popover for a search text field. I came up with this Javascript solution (here in Coffee):
$(".product-search-trigger")
.click(-> false) # cancel click on <a> tag
.popover
container: "body"
html: true
placement: "left"
title: "<strong>Product search</strong> enter number or name"
.on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))
The workaround is in the last line. Before the popover is being displayed the max-width option is set to a custom value. You could also add a custom class to the tip element.
I had the same problem. Spent quite some time searching for an answer and found my own solution: Add following text to the head:
<style type="text/css"> .popover{ max-width:600px; } </style>
Increase width with CSS
You can use CSS to increase the width of your popover, like so:
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
If this doesn't work, you probably want the solution below and alter your container element. (View the JSFiddle)
Twitter bootstrap Container
If that doesn't work, you probably need to specify the container:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
More Info
The popover is contained within the element that it is triggered in. In order to extend it "full width" - specify the container:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
JSFiddle
View the JSFiddle to try it out.