javascript - 如何以不止一种方式设置 bootstrap popover 的样式？

Question

我正在使用 Boostrap 编写单页网站代码。在图表中，我在鼠标悬停时有一些弹出窗口，效果很好。问题是，当我尝试为弹出窗口设置不止一种样式时:即一些弹出窗口必须是黄色的，其他的必须是蓝色的等等。我尝试在 css 中添加新样式并将其替换为 html(即:“popover2”)，或使用内联 css，但 popover 样式与 popover 脚本相关联，我看不到任何更改。我认为的“问题​​”从这里开始:

$.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);

我什至尝试复制 .js 并使用 popover2 作为新对象……没办法……任何人都可以帮助我吗？谢谢。

Answer 1

您可以在纯 HTML/CSS 中很容易地做到这一点。弹出窗口出现在链接/按钮之后，这意味着您可以使用 CSS 中的 + 选择器来定位它。这里有一些你可以尝试的东西:

HTML :

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

CSS:

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

编辑:它有效，这里是 fiddle .