Changing the width of Bootstrap popover
I am designing a page using Bootstrap 3. I am trying to use a popover with placement: right on an input element. The new Bootstrap ensures that if you use form-control you basically have a full-width input element.
The HTML code looks something like this:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
The popovers width is too low, in my opinion because their isn't any width left in the div. I want the input form on the left side, and a wide popover on the right side.
Mostly, I'm looking for a solution where I don't have to override Bootstrap.
The attached JsFiddle. The second input option. Haven't used jsfiddle a lot so don't know, but try increasing the size of the output box to see results, on smaller screens wouldn't even see it. http://jsfiddle.net/Rqx8T/
Answer
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.