Changing the width of Bootstrap popover

Question

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

Answer 1

On Bootstrap 4, you can easily review the template option, by overriding the max-width :

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

This is a good solution if you have several popovers on page.

Answer 2

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.

Answer 3

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Basically i put the popover code in the row div, instead of the input div. Solved the problem.

Answer 4

container: 'body' normally does the trick (see JustAnil's answer above), but there's a problem if your popover is in a modal. The z-index places it behind the modal when the popover's attached to body. This seems to be related to BS2 issue 5014, but I'm getting it on 3.1.1. You're not meant to use a container of body, but if you fix the code to

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

then you fix the z-index problem, but the popover width is still wrong.

The only fix I can find is to use container: 'body' and to add some extra css:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Note that css solutions by themselves won't work.

Answer 5

You can adjust the width of the popover with methods indicated above, but the best thing to do is to define the width of the content before Bootstrap sees is and does its math. 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)

Answer 6

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.

JSFiddle: http://jsfiddle.net/xp1369g4/