动态地向Bootstrap的“ popover”容器添加类

我已经对StackOverflow和Google进行了彻底的搜索，但是空着。如果已经提出并解决此问题，请提前道歉。

注意：我是jQuery的新手，所以我不确定如何自己编写。我敢肯定这是一段简单的代码，但是我无法将其包裹住。

我想要做的是使用一个data-元素（例如：data-class或类似元素）将一个新类（或ID，我不再挑剔！）附加到顶级popover <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>

这是我能做的吗？引导程序站点中有关弹出窗口的文档有点稀疏，所以很遗憾，我花了一段时间才到达这一点:(

预先感谢您的所有回复！

通过从调用者的抓取对象data并访问其$tip属性，您可以做到这一点而无需破解Bootstrap或更改模板。

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

实际上，在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>'
});

基于@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中。

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

它是一个老帖子，但我将其添加为参考。修改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>
    });
});

希望这可以帮助 ：）

只将该类添加到适当的弹出窗口，而不定位其他对象，该怎么办？

$('#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';
});

初始化工具提示时只需设置隐藏的“模板”选项。我不知道引导团队为什么要保守秘密...

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

希望这可以帮助...

这是几年前提出的，有很多答案。但是...最近我不得不自己解决相同的问题，而且我-（a）希望避免操纵源代码，并且（b）需要不断重复使用通用解决方案（因此template: '...'每次初始化都使用该解决方案）。

我的解决办法很简单，而且是那种一样的标记答案-我想通酥料饼是一个扩展了的tooltip.js库。我的意思是-检查一下，源代码仅一百多行。因此，我创建了一个名为的文件popover-extend.js，并将整个弹出窗口的源代码复制粘贴到其中。从那里开始，很容易，只需操作以下几行即可：

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">

如果您像我一样，并且想要添加更多功能，则这是一种非常好的方法。例如，这是我在标题上添加通用关闭按钮的方式（尽管它要求弹出窗口具有指定的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);
}

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

希望这可以帮助任何寻求替代源代码的人

我遇到了同样的问题，我喜欢@Kate的答案，但是源文件中的更改将来可能会产生很多问题，更新引导程序的版本时，您可能会忘记这些小的更改。因此，我找到了另一种方法：

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

作为@CorayThan修复它 data("popover")

popover的tip（）方法返回popover元素，并在未创建时创建它，因此，即使您处于popover的初始化状态，您也将始终获得正确的popover元素（这是我的情况= D）。

在这里已经很晚了，我已经很累了，但是如果您决定更新bootstrap的js文件，那么这种快速的单行代码将来就无法使用。

在第150行的这个要点中查看bootstrap-tooltip.js文件。

这是修改后的工具提示：

在此检查器的窗口签出，您会注意到动态类已添加到工具提示中。

明天我将发布一个更长期，更适当的答案。

这对我有用。它的灵感来自此处“事件”部分的引导程序文档。

$("a[rel=popover]").popover().on("show.bs.popover", function(){
    $(".popover").addClass("your-custom-class");
});

您也可以使用“模板”选项

$element.popover({                               
   html: true,
   trigger: 'click',
   template: '<div class="popover '+MY_CLASS+'" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
   content: function() {
    return 'hello';
   }
});

从您的数据类属性更新MY_CLASS。

您可以使用该container选项解决此问题。

$('[data-toggle="popover"]').popover({
    container: '#foo'
});

或通过标签属性进行设置

<a href="#" data-toggle="popover" data-container="#foo" data-content="Content">Foo</a>

并在关闭body标签之前将其添加到某处

<div id="foo"></div>

然后您可以做类似的事情#foo > .popover。我知道这不是万能的解决方案，但这是实现这一目标的一种方法。

这从外部扩展了您的类bootstrap core class，只需在函数中添加属性data-class和dataClass:true选项即可tooltip

!function($){   
    $.extend($.fn.tooltip.Constructor.DEFAULTS,{
        dataClass: false
    }); 
    var Tooltip = $.fn.tooltip.Constructor;
        _show = Tooltip.prototype.show;

    Tooltip.prototype.show = function (){
        _show.apply(this,Array.prototype.slice.apply(arguments));

        if (this.options.dataClass!=="undefined" && this.options.dataClass){
            var that = this;
            var $tip = this.tip();
            if (this.$element.attr("data-class") !== undefined)
                $tip.addClass(this.$element.attr("data-class"));
        }
    };
}(jQuery);

对于bootstrap v3.3.2，您可以在bootstrap.js上找到这些行

   $tip
    .detach()
    .css({ top: 0, left: 0, display: 'block' })
    .addClass(placement)
    .data('bs.' + this.type, this)

然后添加此行

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

现在在您的popover元素上添加一个类，您只需放置一个属性， data-class="classexemple"然后一切都将正常运行

在www.mixpres.com上找到我们

在Bootstrap 4中，您可以使用以下data-template属性：

<button data-toggle="popover" data-template='<div class="popover MYSUPERCLASS" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-offset="-10 0" data-html="true" data-trigger="focus" data-placement="bottom" data-content='My Popover'>Button</button>

$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .addAttachmentClass('my-own-popover')

您将bs-popover-my-own-popover在.popoverelement内部获得类。

抱歉，但您不太清楚您的问题……但是您想要添加一个父div？放轻松...看这是否是您想要的：

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

演示：http：//jsfiddle.net/PRQfJ/

适用于BS每个版本的最佳选择是，将其放入特定的类中，并在显示该类之后，找到该类，并将您的类名添加到该类的弹出窗口中

// create a template that add the message inside
var $tmp = $("<div class='popoperrormessage'>" + error + "</div>");


            $(this).popover("destroy").popover({
                trigger: "manual",
                animation: false,
                html: true,
                placement:"right",
                content: $tmp,
                container: "body"
            }).popover("show");


            // now we have to find the parent of the popoperrormessagemessage
            $(".popoperrormessage").parents(".popover").addClass("hello");

现在您的弹出窗口将有Hello类

这是我的解决方法，可能不是最有效的，但我发现它最容易实现。

 $('[data-content]').each(function(){
    var options = {
        html: true //optional
    };

    if ($(this)[0].hasAttribute('data-class')) {
        options['template'] = '<div class="popover" role="tooltip ' + $(this).attr('data-class') + '"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
    }

    $(this).popover(options);
});

只需data-class="custom-class"像其他示例一样将其添加到元素中即可。

解决此问题的最佳方法是扩展popover并构建自己的Popover版本。以下是代码，它基于引导程序版本3.3.7

        (function($){
            var PopoverEx = function(element, options){
                this.init('popover', element, options);
            }

                PopoverEx.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {

                    constructor: PopoverEx,
                    tip: function(){
                        if(!this.$tip){
                            this.$tip = $(this.options.template);
                            if(this.options.modifier) this.$tip.addClass(this.options.modifier);
                        }
                        return this.$tip; 
                    }       
                });

            $.fn.popoverex = function(option){
               return this.each(function () {
                var $this   = $(this)
                var data    = $this.data('bs.popover')
                var options = typeof option == 'object' && option

                if (!data && /destroy|hide/.test(option)) return
                if (!data) $this.data('bs.popover', (data = new PopoverEx(this, options)))
                if (typeof option == 'string') data[option]()
              })
            }
        })(window.jQuery);

用法

HTML代码

    <a href="#" class="btn btn-large btn-danger" 
          rel="popover" 
          data-modifier="popover-info" 
          title="A Title" 
          data-content="And here's some amazing content.right?">Hover for popover</a>   

JS脚本

    jQuery(document).ready(function($) {
        $('[rel="popover"]').popoverex();
    });

您可以从此git页面中找到完整的版本和说明 https://gist.github.com/vinoddC/475669d94e97f4d7b6bcfde4cef80420

这是Brian Woodward作品的更新版本。

我知道这个线程很旧，但是对于那些像我一样偶然发现本文的人来说，这是另一种允许更多定制的方法。我尚未在Bootstrap 4中对其进行测试，但在Bootstrap 3中对其进行了测试。

您可以使用自定义数据属性通过html元素将CSS类“提交”到弹出窗口，而不是在函数中对类进行硬编码。在此示例中，我将该属性称为“数据类”。

由于此方法利用了popover的“ placement”选项可用的功能，因此我对其进行了配置，以保留popover中配置的原始布局。

jQuery( '[data-toggle="popover"]' ).popover({

    container: 'body',

    placement: function ( popover, trigger ){

        // Get the submitted placement for the popover
        var placement = jQuery( trigger ).attr( 'data-placement' );

        // Get the class(es) to apply to the popover
        var dataClass = jQuery( trigger ).attr( 'data-class' );

        // Apply the submitted class(es) to the popover element
        jQuery( popover).addClass( dataClass );

        // Return the original placement for the popover
        return placement;

        },

        trigger: 'hover'

});

我希望这有帮助。如果有人有更好或更干净的方法，我很乐于学习:)

我不确定为什么要这样做，但是在我的示例中，我只想设置自定义样式...因此，在CSS中，为当前弹出框编写了正确的选择器。a.rating-popover-这是我打开Popover的链接。-> popover元素将生成到该元素的下一个元素。所以我们可以选择

a.rating-popover + div.popover{
   background: blue;
}

和瞧，蓝色背景。仅适用于使用a.rating-popover元素打开的弹出窗口。