javascript - How to resize twitter bootstrap popover? -

i using bootstrap in mvc project. have issue bootstrap popover widget. have created custom knockout binding popover widget, here code :

check fiddle

 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 un-comment below 2 lines 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 initialize popover on element variable text message , variable size. every thing goes ok when change default width of popover on first time when open position not correct (please check behavior in fiddle).

there line of code in fiddle if uncomment issue solve. feel hacky approach, want better way handle if there ?

here's sample initialization use.

    $(".property-price")     .popover({              trigger: "hover",              placement: 'bottom',             toggle : "popover",             content : "the price calculated ba....the dates selected.",             title: "how 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 can see, uses custom template. template uses custom popover-medium class.

i have css selector

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

you set style on template class if wanted.