CODEWITHSUNDEEP
javascriptcsstwitter-bootstrappopover
Francesca Costaldi
Francesca Costaldi

Reputation: 41

How to have bootstrap popover styled in more than one way?

I'm using Boostrap to code a single page website. In a graph I have some popvers on mouse hover, and that works fine. The problem is when I try to have more than a style for popovers: i.e. Some popovers must be yellow, others must be blue etc. I tried adding a new style in css and substitute it in html (i.e.: "popover2"), or using inline css, but the popover style is associated with the popover script and I cannot 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've even tried duplicanting the .js and using popover2 as a new object... no way... Anyone can help me? Thanks.

Upvotes: 4

Views: 6535

Answers (1)

Calvein
Calvein

Reputation: 2121

You can do it in plain HTML/CSS quite easily. The popover appear just after the link/button which means you can target it with the + selector in CSS. Here something you can try :

The HTML : 

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

The CSS : 

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

EDIT : And it works, here is the fiddle.

Upvotes: 3

Related Questions