javascript - 如何调整 twitter bootstrap popover 的大小？

Question

我在我的 mvc 项目中使用 Bootstrap 。我对 bootstrap popover 小部件有疑问。我为 popover 小部件创建了一个自定义的 knockout 绑定(bind)，这里是代码:

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());

我想在任何具有可变文本消息和可变大小的元素上初始化弹出窗口。一切正常，但是当我更改 popover 的默认宽度时，它的位置不正确 (请检查 fiddle 中的行为)。

fiddle 中有一些代码行，如果您取消注释，这个问题就会解决。但我觉得这是一种 hacky 方法，如果有的话，我想要一些更好的方法来处理？

Answer 1

这是我使用的示例初始化。

    $(".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>',
        });

如您所见，它使用自定义模板。该模板使用自定义的 popover-medium 类。

然后我有一个 CSS 选择器

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

如果需要，您也可以只在模板类上设置样式。