Try to change bootstrap popover width

by jiggle

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<button style="margin: 200px;" class="btn btn-large btn-succes" 
data-bind="popover: { placement: 'top', trigger: 'manual', animation: true }, popoverOptions: { observable: isVisible }, click: open">Helloo</button>

JavaScript

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).siblings('.popover').css({ width: '150px' }); // just switched these 2 lines round
            $(element).popover(extraOptions.observable() ? "show" : "hide");// just switched these 2 lines round
            
            //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());