How to resize twitter bootstrap popover?

Question

I am using bootstrap in my mvc project. I have a problem with bootstrap popover widgets. I created a custom knockout binding for the popover widget, here is the code:

Check script

ko.bindingHandlers.popover = { init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { var options = ko.utils.unwrapObservable(valuesAccessor() || {}); options.html = true; options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>'; $(element).popover(options); }, update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { var extraOptions = allBindingsAccessor().popoverOptions; $(element).popover(extraOptions.observable() ? "show" : "hide"); $(element).siblings('.popover').css({ width: '150px' }); //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE //if(extraOptions.observable()) //$(element).popover('show'); } }; function vm() { var self = this; self.isVisible = ko.observable(false); self.open = function () { self.isVisible(!self.isVisible()); }; } ko.applyBindings(new vm()); 

I want to initialize a popover for any element with a variable text message and with a variable size. Everything goes fine, but when I change the default width by default than the first time it opens its position, this is wrong (check the behavior in the script).

There was some line of code in the fiddle that, if you uncomment this problem, solve it. But I feel like this is a hacky approach, do I need a better way to handle it, if any?

Answer 1

Here is an initialization example that I am using.

  $(".property-price") .popover({ trigger: "hover", placement: 'bottom', toggle : "popover", content : "The from price is calculated ba....the dates selected.", title: "How is the from price calculated?", container: 'body', template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>', }); 

As you can see, it uses a custom template. The template uses the custom class popover-medium.

Then I have a CSS selector

 .popover-medium { max-width: 350px; } 

You can also just set the style in the template class if you want.

Answer 2

Demo

Try this, I edited your code

 ko.bindingHandlers.popover = { init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { var options = ko.utils.unwrapObservable(valuesAccessor() || {}); options.html = true; options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>'; $(element).popover(options); }, update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { var extraOptions = allBindingsAccessor().popoverOptions; $(element).popover(extraOptions.observable() ? "show" : "hide"); //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE //if(extraOptions.observable()) //$(element).popover('show'); } }; function vm() { var self = this; self.isVisible = ko.observable(false); self.open = function () { self.isVisible(!self.isVisible()); }; } ko.applyBindings(new vm()); 

just add this css

 .popover { max-width: 150px; width: auto; } 

Hope this helps. Thank you.

Answer 3

You change the width after popover initialization. The calculated upper left popover position remains in place, but the width becomes smaller. This leads to an increase in height.

You will need to reorder your events in order to apply the width before initializing the popover.