如何将类添加到弹出标题

Question

我使用了popover的bootstrap元素，但我不知道如何将它归类为一个类。我想为每个不同的班级创建一个自定义的背景颜色。 这是我的popover构建（在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')
});