如何以多种方式设置引导弹出窗口的样式？

Question

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

$.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。