4

我正在使用 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 作为新对象......没办法......任何人都可以帮助我吗？谢谢。

4

1 回答 1

3

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

的HTML： 

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

的CSS： 

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

编辑：它有效，这是小提琴。

于 2012-11-07T14:07:48.063 回答