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

时间:2012-08-29 03:04:46

标签: jquery css twitter-bootstrap

我已经彻底搜索了StackOverflow和谷歌,但是空洞了。如果有人提出要求,请提前道歉。已经解决了。

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

我要做的是使用data-元素(例如:data-class或类似的元素)来附加一个新类(或ID,我不再挑剔了!)到顶部-level 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>

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

提前感谢任何&amp;所有回复!

22 个答案:

答案 0 :(得分:66)

你可以通过从调用者的data抓取popover对象并访问其$tip属性,在不破解Bootstrap且不更改模板的情况下执行此操作。

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

答案 1 :(得分:46)

在版本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>'
});

答案 2 :(得分:22)

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

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

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

您将要添加一个新行,即:

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

现在,每当您向弹出式调用添加data-class时,它都会将该属性添加到<div class="popover"> div。

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

答案 3 :(得分:16)

它是一个旧帖子,但我只是作为参考添加它。修改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>
    });
});

希望这会有所帮助:)

答案 4 :(得分:9)

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

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

希望这会有所帮助......

答案 5 :(得分:8)

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

我的解决方案很简单,与标记的答案有点相似 - 我认为popover是 template: '...'库的扩展名。我的意思是 - 检查一下,源代码是barely more than a hundred lines。所以我创建了一个名为tooltip.js的文件,并在其中复制粘贴了整个popover源代码。 从那里很容易 - 简单地操纵这些线:

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);    
    }

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

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

关于它的一个很酷的事情是,您在DEFAULTS中设置的所有内容都可以通过html进行配置,即如果您添加名为// 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); } 的变量,您将能够自动通过foo来操作它

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

答案 6 :(得分:8)

如何将该类仅添加到适当的弹出窗口,而不是针对其他人?

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

答案 7 :(得分:5)

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

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

@CorayThan用data("popover")

修复它

popover的方法 tip()返回popover元素,并在未创建时创建,因此即使您有始终,也会获得正确的popover元素是在弹出窗口的初始化(这是我的情况= D)。

答案 8 :(得分:3)

现在已经很晚了,而且我已经累了但是如果您决定更新bootstrap的js文件,这将是一个快速的单行程,将来无法使用。

在第150行的gist中查看bootstrap-tooltip.js文件。

这是经过修改的工具提示:

Here's the modified tooltip in action

在那里查看检查员的窗口,您会注意到动态类已添加到工具提示中。

我会发布一个更长久的&amp;明天适当回答。

答案 9 :(得分:2)

这对我有用。它的灵感来自here的引导程序文档,事件部分。

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

答案 10 :(得分:2)

您也可以使用'模板'选项

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

从您的data-class属性更新MY_CLASS。

答案 11 :(得分:1)

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

您将在bs-popover-my-own-popover元素中获得.popover类。

答案 12 :(得分:1)

这会将您的课程从bootstrap core class扩展,只需将属性data-class和选项dataClass:添加到您的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);

答案 13 :(得分:1)

对于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

答案 14 :(得分:1)

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

答案 15 :(得分:0)

此问题的最佳解决方案是扩展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作品的更新版本。

答案 16 :(得分:0)

我知道这个线程很旧,但是对于像我一样偶然发现本文的人来说,这是另一种允许更多自定义的方法。我尚未在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'

});

我希望这会有所帮助。如果有人有更好或更干净的方法,我将很高兴学习:)

答案 17 :(得分:0)

您可以使用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之类的事情。我知道这不是一个通用的解决方案,但它只是一种方法。

答案 18 :(得分:0)

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

 $('[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"添加到元素中,就像其他示例一样。

答案 19 :(得分:0)

适用于BS的每个版本的最佳选项是将其设置在一个specefic类中,并在显示之后,找到该类,并将您的类名添加到其中的popover parrent

// 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");

现在你的popover将有你好

答案 20 :(得分:0)

抱歉,但不太明白你的问题...但你想要的是添加一个父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/

答案 21 :(得分:-1)

我不确定你为什么要这样做,但在我的例子中,我只是想设置自定义样式......所以在CSS中只为当前的popover编写了正确的选择器。 a.rating-popover - 这是我打开popover的链接。 - &GT; popover元素将生成到该元素的下一个元素。 所以我们可以用

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

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