How to add a class to a popover title

Question

I'm using the popover's bootstrap element but I don't know how to attribute to it a class. I'd like to create a customed background color for each different class. Here's my popover build (in javascript)

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

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

If I do :

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

The result given will be

As you can see the class is not in the same div that the popover-title

@Raviteja the class generated is on the sibling, I have to reach the sibling then the child to get the popover-title class, my question was at first if I could add the class to the popover-title directly — So4ne, Nov 10 '15 at 09:59
can you please check the link http://stackoverflow.com/questions/12170357/dynamically-add-a-class-to-bootstraps-popover-container — Hemraj Jain, Nov 10 '15 at 10:09

score 5 · Accepted Answer · answered Nov 10 '15 at 10:05

You can define your custom template using template property:

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

That is exactly what I want, I put the class name on the popover-title class, thank you ! — So4ne, Nov 10 '15 at 10:12

How to add a class to a popover title

1 Answers1