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("×"); 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。
