Width option to popover

[ogerik]

No description provided.

[alexgorbatchev]

+1

[abelaska]

+1

[joshdick]

+1

[khirakawa]

+1

[mhulet]

+1

[donflopez]

+1

[olvlvl]

We talked about popover width issue on issue #1730.

In my opinion passing the width in pixel in not a good idea, because it's too specific. I use a ".fit-content" class with my toolkit Brickrouge and that's handy enough : http://brickrouge.org/#popover-anchor-options

It simply sets the width to auto so that it's the content that defines its width, not its the container.

[davidmles]

+1

[fat]

just do this in css

[gauravsjbrana]

for dynamic width, just go to bootstrap.css, search for ".popover-inner {" and change width line to this.. width:auto;

[ghost]

+1

[KOTRET]

👍

just do this in css

does not work if you want to do this for specific popovers only, as you cannot even add some class to it.

[greatwalks]

@KOTRET ...yeah that's my issue too. I want most popovers to be as they are but with certain popovers I want to control the width. If I could add a class/inline-style in my options that would solve that.

[Yohn]

you can use the template function to add a class to that popover.. see below, I added special-class to the popover

$().popover({
  template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})

[KOTRET]

@Yohn: i know this workaround, anyway it's not very convenient ;) i don't see any problem here by adding an option for a style or an additional class

[Yohn]

@KOTRET I could see adding an option for a specific class to be added to the tooltip/popover, but if thats not gonna get merged I'm ok with using the template work around for now

[hlascelles]

Try adding this to the end of your less declarations. Works for me.

.popover {
    width:auto;
}

(Some above have found popover-inner works in their case)

[fabiofabbrucci]

+1

[KOTRET]

@hlascelles: this neither FIXes the width nor is a possibility to add styles to a specific single popover

[bezraznizi]

+1

as workaround in my case (without "data-") I'm binding changing width action with the popover trigger event like $('a.myclass').on(...).

I'm using left-sided popover on hover-event, so for the reason I need wider poping window I just have to set its width to bigger just in time that event occurs.

$('a.WHATEVER').on('hover',function(){
$('.popover').css({'width':'296px'});
});

Works in Safari, I didn't check it for other browsers. Maybe it will be helpfull to somebody.

[siphiwe]

+1

[styfle]

👍

[mikeatlas]

@Yohn thanks for the template idea, it saved me a lot of trouble getting my popover styled the way I wanted it.

[briansanchez]

+1