How to create a bootstrap popover in several modes?

Question

I use Boostrap to encode a single website. On the graph, I have some hover hints and this works fine. The problem is that I try to have more than the style for popovers: for example, some popovers should be yellow, others should be blue, etc. I tried adding a new style to css and replacing it with html (for example, "popover2") or using the built-in css, but the popover style is related to the popover script and I don't see any changes. The “problem,” I think, starts from here:

$.fn.popover = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('popover') , options = typeof option == 'object' && option if (!data) $this.data('popover', (data = new Popover(this, options))) if (typeof option == 'string') data[option]() }) } $.fn.popover.Constructor = Popover $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' , trigger: 'click' , content: '' , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }) }(window.jQuery); 

I even tried duplicating .js and using popover2 as a new object ... no way ... Can anyone help me? Thanks.

Answer 1

You can do this in simple HTML / CSS quite easily. Popover appears immediately after the link / button, which means that you can customize it using the + selector in CSS. Here you can try:

HTML:

 <a rel="popover" data-color="yellow" data-etc="...">My popover</a> 

CSS:

 [rel=popover][data-color=yellow] + .popover { background: yellow; } 

EDIT: And it works, here is the fiddle .