如何将类添加到弹出框标题

Question

我正在使用弹出框的引导元素，但我不知道如何将其归为一个类。我想为每个不同的班级创建一个自定义的背景颜色。 这是我的弹出窗口构建（在 javascript 中）

$(element).popover({
                    'placement': 'top',
                    'animation': true,
                    'html': true,
                    'title' : variable,
                    'content': html
                });

                $(element).popover('show');

如果我这样做：

$(element).popover({
                    'placement': function(context, src) {
                        $(context).addClass($(src).data('customClassName'));
                        return 'top';},
                    'animation': true,
                    'html': true,
                    'title' :feature.get('features')[0].get('name') + ' (' +  feature.get('features')[0].get('type') + ')',
                    'content': html
                });
                $(element).popover().addClass('TESTCLASS');
                $(element).popover('show');

给出的结果将是

如您所见，该类与 popover-title 不在同一个 div 中

Answer 1

您可以使用template 属性定义您的自定义模板：

function getPopoverCustomTemplate(className) {
    return '<div class="popover ' + className + '" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
}

$(element).popover({
    'placement': 'top',
    'animation': true,
    'html': true,
    'title' : variable,
    'content': html,
    'template': getPopoverCustomTemplate('myCustomClass')
});