如何将类添加到弹出窗口标题

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

给出的结果将是

正如你所看到的，该类与弹出窗口标题不在同一个 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')
});