动态地向Bootstrap的'popover'容器添加一个类

Question

我已经彻底搜索了StackOverflow和谷歌,但是空洞了.如果已经提出并已经解决了这个问题,请提前道歉.

NB:我是jQuery的新手,所以我不确定如何自己写这个.我确信这是一个简单的代码片段,但无法绕过它.

我要做的是使用一个data-元素(例如:data-class或类似的)将一个新类(或ID,我不再挑剔!)附加到顶级弹出窗口<div>.我目前的代码如下:

jQuery的:

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTML:

<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">

理想情况下,我会吐出的HTML类型是这样的:

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

这是我能做的吗？弹出窗口的bootstrap网站上的文档有点稀疏,所以我花了一段时间才到达这一点,不幸的是:(

在此先感谢任何和所有回复!

Answer 1

你可以通过从调用者那里获取popover对象data并访问其$tip属性,而无需破解Bootstrap并且无需更改模板.

$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .tip()
  .addClass('my-super-popover');

Answer 2

在版本2.3中还有另一种方法可以实现这一点.您可以覆盖默认模板以将类包含到容器中.

var pop = $('a', this.el).popover({
  trigger: 'click'
  , template: '<div class="popover awesome-popover-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});

Answer 3

基于@bchhun所写的内容和大量的头脑,我觉得我应该回答我自己的问题,因为我开始工作了.我也注意到这一点很受欢迎和喜欢,所以我希望我能像其他人一样帮助jQuery的新手.

在当前的Bootstrap构建[v2.1.0]中,脚本都是合并的.因此,如果您已在构建中包含所有脚本(并且未编辑任何新行/取出一些),则转到未缩小.js文件的第1108行.你会发现以下代码:

$tip
  .css(tp)
  .addClass(placement)
  .addClass('in')

你将要为此添加一个新行,即:

  .addClass(this.$element.attr("data-class"))

所以现在每当你添加data-class到popover调用时,它都会将属性添加到<div class="popover">div中.

现在我看到它,它是如此明显:)

Answer 4

它是一个旧帖子,但我只是作为参考添加它.修改Shankar Cabus的答案,而不是将动态类添加到父级,它将添加到创建的.popover div中.

$(function(){
    $('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .on("hover", function(){
        $('.popover').addClass($(this).data("class")); //Add class .dynamic-class to <div>
    });
});

希望这可以帮助 :)

Answer 5

只需在初始化工具提示时设置隐藏的"模板"选项.我不知道为什么引导团队会保守这个秘密......

$(elem).popover({
    template: '<div class="popover YOURCLASS"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}).popover('show');

希望这可以帮助...

Answer 6

如何将该类仅添加到适当的popover,而不是针对其他人？

$('#someElement').popover({placement: function(context, src) {
    $(context).addClass('my-custom-class');
    return 'top'; // - 'top' placement in my case
});

或者某些变体,比如从'someElement'的数据中获取自定义类名,如下所示:

$('#someElement').popover({placement: function(context, src) {
    $(context).addClass($(src).data('customClassName'));
    return 'top';
});

Answer 7

这是几年前提出来的,而且有很多答案.但是......我最近不得不自己解决同样的问题,我 - (a)想避免操纵源代码,(b)需要一个通用的解决方案不断重复使用(所以使用template: '...'每个初始化的解决方案都没有).

我的解决办法很简单,而且是那种一样明显的答案-我想通酥料饼是一个扩展了的tooltip.js库.我的意思是 - 检查一下,源代码只有不到一百行.所以我创建了一个名为的文件popover-extend.js,并将整个popover源代码复制粘贴.从那里很容易 - 简单操作这些行:

Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    // add this:
    cls: ''
});

然后:

Popover.prototype.setContent = function () {
    // add this:
    if (this.options.cls) {
        $tip.addClass(this.options.cls);    
    }

现在你可以这样做:

<a href="#" rel="popover" 
   data-cls="dynamic-class" 
   title="Title goes here" data-content="Content goes here">

如果你像我一样想要添加更多功能,这是一个非常好的方法.例如,这是我如何在标题中添加一个通用关闭按钮(虽然它要求popover具有指定的id):

// added this to the the DEFAULTS
close: ''


// added this to the setContent function
if (this.options.close) {
    var id = this.$element.attr('id'),
        btn = $("<button></button>", {
            "class": "close",
            "id": "close",
            "onclick": "$('#"+id+"').popover('hide');"
    }),

    title = $tip.find('.popover-title');

    btn.html("&times;");
    btn.appendTo(title);
}

关于它的一个很酷的事情是,您在DEFAULTS中设置的所有内容都可以通过html进行配置,即如果您添加一个名为的变量foo,您将自动能够通过它进行操作data-foo=.

希望这有助于任何人寻找操作源代码的替代方案

Answer 8

我有同样的问题,我喜欢@Kate的答案,但是源文件中的更改将来会产生很多问题,当你更新bootstrap的版本时,你可能会忘记这些小改动.所以我找到了另一种方法:

 $(element).popover({...}).data("popover").tip().addClass("your_class")

正如@CorayThan修复它 data("popover")

popover 的方法tip()返回popover元素,并在未创建时创建,因此即使您处于popover的初始化(这是我的情况= D),您也将始终获得正确的popover元素.