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

我已经彻底搜索了 StackOverflow 和 Google，但是一无所获。因此，如果这个问题已经被问及并得到解决，请提前道歉。

注意: 我是 jQuery 的新手，所以我不知道如何自己写这篇文章。我确信这是一个简单的代码片段，但是我无法理解它。

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

我能做点什么吗？Popover 引导站点上的文档有点少，所以我花了一些时间才看到这一点，不幸的是: (

预先感谢任何和所有的回应！

91564 次浏览
小开

这里已经很晚了，我已经很累了，但是这里有一个快速的一行程序，如果您决定更新 bootstrap 的 js 文件，它将不会在将来工作。

看一下第150行 大意中的 bootstrap-tooltip. js 文件。

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

Here's the modified tooltip in action

检查下面的检查窗口，您会注意到 动态类已经被添加到工具提示中。

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

小开

对不起，我没有完全理解您的问题... 但是您想要的是添加一个父 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/

小开

基于@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>
});
});

希望这对你有帮助:)

小开

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

我不知道你为什么要这样做，但在我的例子中，我只是想设置自定义样式... 所以在 CSS 中只是写了当前弹出窗口的右选择器。 这是我打开酥饼的链接。- > popover 元素将生成到该元素的下一个。 所以我们可以选择

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

瞧，蓝色背景，只有用 A 级泡芙元素打开的泡芙。

小开

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

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

As@CorayThan 用 data("popover")修好它

Popover 的方法 提示()返回 popover 元素，并在没有创建时创建，因此即使在 popover 的初始化阶段(这是我的 case = D) ，一直都是也将获得正确的 popover 元素。

小开

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

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

希望这个能帮上忙。

小开
最佳答案

您可以通过从调用者的 data中抓取 popover 对象并访问它的 $tip属性来做到这一点，而不需要破解 Bootstrap，也不需要更改模板。

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

这对我很有用。它的灵感来自于引导程序的 给你文档，活动部分。

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

如何添加该类只适合爆米花，而不针对其他人？

$('#someElement').popover({placement: function(context, src) {
$(context).addClass('my-custom-class');
return 'top'; // - 'top' placement in my case
});

或者一些变化，比如从‘ some Element’的数据中获取自定义类名，如下所示:

$('#someElement').popover({placement: function(context, src) {
$(context).addClass($(src).data('customClassName'));
return 'top';
});
小开

几年前就有人问过这个问题，答案有很多。我最近不得不自己解决同样的问题，我-(a)想避免操纵源代码，(b)需要一个通用的解决方案来不断重用(所以每次初始化时使用 template: '...'解决方案是不合适的)。

我的解决方案非常简单，而且和标记的答案差不多——我认为 popover 是 tooltip.js库的 延期。你看，源代码是 不超过一百行。因此，我创建了一个名为 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">

如果您像我一样想要添加更多功能，那么这是一个非常好的方法。例如，下面是我如何在标题中添加一个通用的关闭按钮(尽管它要求弹出窗口有一个指定的 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=自动操作它。

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

小开

对每个版本的 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");

现在你的酥饼将有 你好类

小开

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

$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:添加到 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

小开

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

 $('[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>

在关闭主体标记之前，将其添加到某个位置

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

然后你可以做类似 #foo > .popover的事情。我知道这不是一个放之四海而皆准的解决方案，但这是一种方法。

小开

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

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

小开

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

这是布莱恩 · 伍德沃德作品的升级版。

小开

我知道这个线程已经过时了，但是对于那些像我一样偶然发现这篇文章的人来说，这里有另外一种方法可以允许更多的定制。我还没有用 Bootstrap 4测试过，但是用 Bootstrap 3测试过。

不必在函数中硬编码一个类，您可以使用自定义数据属性通过 html 元素“提交”一个 css 类到 popover。对于这个示例，我将该属性称为“ data-class”。

因为这个方法利用了 popover“放置”选项可用的功能，所以我将其配置为保留在 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'


});

希望这个能帮上忙。如果有人有更好或更干净的方法来做这件事，我很乐意学习:)


提交答案