将一个类动态添加到 Bootstrap 的“popover”容器中

Posted

技术标签:

【中文标题】将一个类动态添加到 Bootstrap 的“popover”容器中【英文标题】:Dynamically add a class to Bootstrap's 'popover' container 【发布时间】:2012-08-23 14:47:09 【问题描述】:

我已经彻底搜索过 *** 和 Google,但结果都是空的。因此,如果已经提出并解决了这个问题,请提前道歉。

注意:我是 jQuery 的新手,所以我不知道如何自己编写。我确信这是一个简单的 sn-p 代码,但我无法理解它。

我要做的是使用data- 元素(例如:data-class 或类似元素)将新类(或 ID,我不再挑剔了!)附加到***弹出框@ 987654323@。我目前拥有的代码如下:

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>

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

提前感谢所有回复!

【问题讨论】:

我会在时间限制允许的情况下选择我的答案为正确的:) 所以暂时看下面。 你有没有找到不涉及操作源代码的解决方案? 【参考方案1】:

这里已经很晚了,我也累了,但是如果您决定更新 bootstrap 的 js 文件,这里有一个快速的单行代码,将来将无法使用。

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

下面是修改后的工具提示:

查看下方的检查器窗口,您会注意到 dynamic-class 已添加到工具提示中。

明天我会发布一个更长期、更合适的答案。

【讨论】:

这就是我所追求的,但我不清楚如何实现它。我抓住了您链接到的脚本并添加了数据类,希望它能“神奇地”工作,但不幸的是它没有;)我还需要做些什么吗?只是为了确认一下,我希望让它在引导弹出窗口中工作,而不是引导工具提示。 经过大量的挠头、晚餐、一些电视和更多的代码挖掘之后,我得到了它的工作 - 它是基于你写的。所以谢谢!我将编写完整的解释并将其标记为正确,但我只是想感谢您的快速回复。【参考方案2】:

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

【讨论】:

不完全正确 - 我不想添加 new &lt;div&gt;,而是向 @ 添加 一个额外的新的动态类987654324@。这有意义吗?【参考方案3】:

根据@bchhun 写的内容和很多挠头,我觉得我应该回答我自己的问题,因为我得到了它的工作。我还注意到它已被收藏和喜欢,所以我希望我能帮助像我这样的 jQuery 新手。

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

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

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

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

所以现在每当您将data-class 添加到弹出框调用时,它都会将属性添加到&lt;div class="popover"&gt; div。

现在我看到了,很明显:)

【讨论】:

这就是你想要的吗??啊……好! Rsrsrsrs Bootstrap 的弹出框是 tooltip 的扩展。这就是为什么我的解决方案在那里。搞清楚一切的好工作:) 如果有人将此作为拉取请求提交,那就太好了。【参考方案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>
    );
);

希望这会有所帮助:)

【讨论】:

+1 这样可以充分利用这种情况。 我知道这是很久以前的事了,但仅供参考 - 这与我最初的问题无关,所以无论如何它也无济于事。我想要每个单独的弹出框都有单独的类,而不是所有弹出框的通用类。因此我制作了一个新的数据元素。我可以理解这对其他人有何帮助,但这与我最初提出的问题无关。【参考方案5】:

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

【讨论】:

谢谢——这是完成此任务的最佳方式。奇怪的是,这不在他们的文档中。 @Todd 好吧,它现在已经记录在案了:getbootstrap.com/javascript/#popovers-usage 这至少是 bootstrap 2 的正确答案。谢谢你:)【参考方案6】:

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

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

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

【讨论】:

因为我是动态生成弹出框,所以弹出框位于 &lt;body&gt; 的底部 - 而不是相邻的选择器。【参考方案7】:

我也遇到了同样的问题,我喜欢@Kate 的回答,但是源文件的更改将来会产生很多问题,当您更新引导程序的版本时,您可能会忘记这些小更改。所以我找到了另一种方法:

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

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

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

【讨论】:

这对我不起作用。创建弹出框,然后使用 $(element).data('popover').tip().addClass("your_class"); 确实有效。 你试试@CorayThan 说的吗?我现在用那个编辑了我的答案,我忘记了 在最近的版本中,数据键是“bs.popover”:$(element).popover(...).data("bs.popover").tip() 嗨,我收到一个未定义的错误。你能看看吗。这是我的代码***.com/questions/38495436/… 这个游戏迟到了,但我认为.tip() 使用selector 选项用于动态元素时不会返回弹出框是否正确?似乎不适合我。【参考方案8】:

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

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

希望这会有所帮助...

【讨论】:

这在 Bootstrap 3 上也很有效。最重要的是,它不需要修改引导源本身。谢谢。 这应该是公认的答案,因为它是规范的解决方案。【参考方案9】:

您可以通过从调用者的data 获取弹出框对象并访问其$tip 属性来执行此操作,而无需破解 Bootstrap 并且无需更改模板。

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

【讨论】:

注意,在Bootstrap 3中数据名改为'bs.popover' 在 v2.3.1 上,$tip 应替换为 tip() 就像下面说的tranver,在较新的Boostrap中你需要使用bs.popovertip(),比如$(element).popover(...).data("bs.popover").tip() 这应该是这个问题的答案 是的,因为.data(...) 检索第一个匹配项的数据值。如果您想设置所有元素,您可以使用每个 .each(function() $(this).data('bs.popover').tip.addClass('my-super-popover'); ) 或映射 .map(function() return $(this).data('bs.popover').tip; ).addClass('my-super-popover');【参考方案10】:

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

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

【讨论】:

【参考方案11】:

如何只将该类添加到适当的弹出框,而不针对其他人?

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

【讨论】:

如果您尝试通过 css 类设置弹出框的宽度,我会使用此方法,以便位置补偿弹出框宽度的变化。 (例如,如果您使用的是向左展示位置,如果您将其扩大,您的弹出框可能会出现在您的链接顶部) 我觉得这真的是最简单最直接的答案,不需要修改模板或者使用.tip()。我喜欢它,因为它让我可以使用 .popover 的 trigger: 'manual'.show(),而不会出现任何其他问题。 谢谢,这对我来说似乎是最好的解决方案【参考方案12】:

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

我的解决方案很简单,与标记的答案有点相同 - 我认为 popover 是tooltip.js 库的扩展。我的意思是-检查一下,源代码是barely more than a hundred lines。所以我创建了一个名为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);

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

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

【讨论】:

只是想向任何正在重新寻找这样的解决方案的人指出;我的这个问题早在 2012 年 8 月就被问到了(我相信当我们使用 Bootstrap 版本 2.3 时)。事情变了..!感谢您为最新的 Bootstrap 版本 (3.1.1) 添加解决方案。 这是最好的答案。它允许您不破坏核心库并且不是一些黑客行为。向浏览器发送更多信息,但值得。 谢谢@Tony。如果您想避免向浏览器发送更多信息,请下载 a customized version of bootstrap 而不使用 popover.js,您将节省这笔费用。不过,诚然,这与操作源代码是一样的 我在这里最喜欢这种技术,我实现了一些非常相似的东西。这是 IMO 最不稳定和优雅的解决方案。 这是最好的解决方案。【参考方案13】:

适用于每个版本的 BS 的最佳选择是将其放入特定的类中,然后在显示该类后,找到该类,并将您的类名添加到它的 popover 父级

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

【讨论】:

【参考方案14】:

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

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

【讨论】:

【参考方案15】:

这从外部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);

【讨论】:

【参考方案16】:

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

【讨论】:

【参考方案17】:

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

 $('[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" 添加到元素。

【讨论】:

【参考方案18】:

您可以使用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 &gt; .popover 之类的操作。我知道这不是一个万能的解决方案,但它是一种方法。

【讨论】:

【参考方案19】:

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

【讨论】:

【参考方案20】:
$('a[rel=popover]')
  .popover( placement: 'bottom', trigger: 'hover' )
  .data('bs.popover')
  .addAttachmentClass('my-own-popover')

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

【讨论】:

【参考方案21】:

这个问题的最佳解决方案是扩展 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 找到完整版本和描述

这是布赖恩·伍德沃德作品的更新版本。

【讨论】:

【参考方案22】:

我知道这个帖子已经过时了,但是对于那些像我一样偶然发现这篇文章的人来说,这是另一种允许更多自定义的方法。我没有用 Bootstrap 4 测试过,但是用 Bootstrap 3 测试过。

您可以使用自定义数据属性通过 html 元素将 css 类“提交”到弹出框,而不是在函数中硬编码类。在本例中,我将该属性称为“数据类”。

由于此方法利用了弹出框“放置”选项可用的功能,我已对其进行配置以保留弹出框中配置的原始位置。

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'

);

我希望这会有所帮助。如果有人有更好或更清洁的方法,我很乐意学习:)

【讨论】:

以上是关于将一个类动态添加到 Bootstrap 的“popover”容器中的主要内容,如果未能解决你的问题,请参考以下文章

如何动态地将数组添加到 react-bootstrap 表中?

使用 jQuery 将幻灯片动态添加到 Bootstrap 3 轮播

如何动态添加 vue bootstrap 下拉列表项?

有啥方法可以将类添加到 bootstrap_django form_fields?

使用 bootstrap-vue:如何将类添加到 b 分页组件中的页面按钮

动态切换表行的可见性 - bootstrap-vue