dynamic地将一个类添加到Bootstrap的“popover”容器

我彻底search了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> 

这是我能做的吗? 在bootstrap站点上的文档是有点稀疏,所以它是需要我一段时间才刚刚到达这一点,不幸的是:(

提前感谢任何及所有的答复!

你可以做到这一点,而无需攻击Bootstrap,也不需要改变模板,通过从调用者的data获取popover对象并访问它的$tip属性。

 $('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的答案,而不是将dynamic类添加到父项,它将被添加到创build的.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> }); }); 

希望这可以帮助 :)

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

 $(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)需要一个通用的解决scheme,以便不断重复使用(所以使用template: '...'解决scheme为每个初始化出)。

我的解决scheme很简单,就像标记的答案一样 – 我认为popover是tooltip.js的扩展 。 我的意思是 – 检查出来,源代码只有几百行 。 所以我创build了一个名为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"> 

如果你像我一样,并且想添加更多的function,这是一个非常好的方法。 例如,下面是我为标题添加了一个通用的closuresbutton(尽pipe它需要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进行configuration,也就是说,如果你添加一个名为foo的variables,你将自动能够通过data-foo=来操作它。

希望这有助于任何人寻找替代操纵源代码

如何将该类仅添加到合适的popup窗口中,而不将其他目标locking?

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

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

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

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

popover方法的tip()方法返回popover元素,并在创build的时候创build,所以即使你在popover的初始化(这是我的case = D),你总是会得到正确的popover元素。

现在越来越晚了,我越来越累,但是如果你决定更新引导程序的js文件,这里有一个快速的单行程,将来不会有用。

请看第150行的要点 bootstrap-tooltip.js文件。

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

这里是修改后的工具提示

检查检查员的窗口,你会发现dynamic类已经被添加到工具提示。

明天我会发布一个更长的适当的答案。

这对我有用。 这是从这里的引导文件, 事件部分的启发。

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

这扩展了你的类从外侧bootstrap core class ,只是添加属性data-class和选项dataClass: true到您的tooltipfunction

 !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上find这些行

  $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"那么一切正常

find我们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> 

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

最好的select,在BS的每一个工作,是让它在一个specefic类内,并显示后,find这个类,并添加您的类名到它的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将有你好

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

  $('[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"的元素像其他的例子。

你可以使用container选项来解决这个问题。

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

或通过标签属性设置它

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

在closuresbody标签之前添加这个地方

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

那么你可以做一些像#foo > .popover 。 我知道这不是一个通用的解决scheme,但是这是一个办法。

我不知道为什么你想要这样做,但在我的例子中,我只是想设置自定义样式…所以在CSS刚刚编写正确的select器当前popover。 a.rating-popover – 这是我打开popover的链接。 – > popover元素将被生成到该元素的下一个元素。 所以我们可以select它

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

和瞧,蓝色的背景。 只有用a.rating-popover元素打开的popovers。