How to resize twitter bootstrap popover?

Question

I am using bootstrap in my mvc project. I have an issue with bootstrap popover widget. I have created a custom knockout binding for popover widget, here the 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 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 popover on any element with variable text message and with variable size. Every thing goes ok but when i change the default width of the popover than on first time when it open its position is not correct (please check the behavior in fiddle).

There was some line of code in the fiddle which if you uncomment than this issue solve. But i feel it is a hacky approach, i want some better way to handle if there is any ?

Answer 1

Here's a sample initialization that I use.

    $(".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 a custom popover-medium class.

I then have a CSS selector

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

You could also just set a style on the template class if you wanted.

Answer 2

DEMO

Try this I have 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