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 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/

Solution 1

<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.

Solution 2

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/

Solution 3

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>

Solution 4

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.

Solution 5

To change width you can use css

For fixed size wanted

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

For max width wanted:

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

jsfiddle: http://jsfiddle.net/Rqx8T/2/

View more solutions

Comments

[mayankbatra]

That would firstly change popover width across the site. But did find an answer.More correctly a workaround, posting it now.

[Colin]

If you're not Coffee-literate here's the same last line as regular js: .on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });

[EML]

+1, but will/may not work if your popover is in a modal: see my answer below.

[DuelistPlayer]

+1 on it being annoying when the popover appears behind the modal. I ran into this same problem with angular-ui bootstrap directive using a tooltip with tooltip-append-to-body, it appeared behind the modal and the modal 'grayed out' background.

[Gregory Cosmo Haun]

The answer above was TLDR for me but contained this genius snippet which solved both the width and the problem of capturing all popovers: $('[data-toggle="popover"]').popover({ container: 'body' });

[Peter Ehrlich]

I had to add !important

[tread]

You can use the neater data attribute: data-container="body" on the element

[Chris Cirefice]

@surfer190 Neater on a per-popover basis, but clutter if you want every popover to have container: "body".

[Johnathan Elmore]

wow... answers the original question as well. Clean and doesn't override bootstrap.

[Todor Todorov]

This will not work because of the last line. Parsing an integer as value for the width will cause CSS to break. Instead you shoul try: $('.popover').css('width', popover_size + 'px'); Since the popover_size is parsed as integer. Another thing is that: popover_size = ((parseInt(string[0])+350)); Will add extra width.

[cronfy]

did not work for me.. I was required to add max-width: 500px to style too.

[Paul Bormans]

Please also notice the @popover-max-width variable. If you compile the bootstrap less code yourself then it's easy to override those.

[John Creamer]

You may need to add !important in order to override the bootstrap default setting.

[Taufik Nur Rahmanda]

What is .tip()? Why use .data()? XD I don't really understand this, but it work! I like this solution better than writing new CSS to replace the default max-width. Thank you for this solution! Btw instead of "600px", I set it to "none". It's better for me.

[BENARD Patrick]

@Peter, I can't reproduce your issue, I think you just forgot to add data-placement to your input...

[Hardik Patel]

@pbenard I am having same problem, your solution works for lowering the max-width than 276px. But if you will try to change max-width more than that than it won't change.

[t.durden]

did not work for me. I did expect it to work :( Odd

[t.durden]

how does that change the width of the popover?

[Deano]

This has worked for me, however only when settings width not max-width

[infografnet]

I don't think "tip()" works - seems to be not a function (at least not in bootstrap 4), however "tip" does work, but then the entire line should be: return $($(this).data("bs.popover").tip).css({maxWidth: "300px"})

[infografnet]

adding style="max-width: 500px;" didn't work for me unless I also set "sanitize" : false in the options.