jQuery 动态地向 Bootstrap 的“popover”容器添加一个类

Dynamically add a class to Bootstrap's 'popover' container

提问by Kate

I've thoroughly searched through both StackOverflow and Google, but come up empty. So apologies in advance if this has been asked & resolved already.

我已经彻底搜索了 StackOverflow 和 Google，但结果是空的。因此，如果这已经被询问并解决了，请提前道歉。

NB:I'm a newbie at jQuery, so I'm not sure how to write this up myself. I'm sure this is an easy snippet of code, but can't wrap my head around it.

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

What I'm looking to do is use a data-element (eg: data-classor similar) to attach a new class (Or ID, I'm not picky anymore!) to the top-level popover <div>. The code I currently have is as follows:

我想要做的是使用一个data-元素（例如：data-class或类似元素）将一个新类（或 ID，我不再挑剔了！）附加到顶级 popover <div>。我目前拥有的代码如下：

jQuery:

jQuery：

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTML:

HTML：

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

And ideally the kind of HTML I would have spit out, is something like this:

理想情况下，我会吐出的那种 HTML 是这样的：

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

Is this something I can do? The documentation on the bootstrap site for popovers is a bit sparse, so it's taken me a while just to get to this point, unfortunately :(

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

Thanks in advance for any & all responses!

提前感谢您的任何和所有回复！

回答by Seth Jeffery

You can do this without hacking Bootstrap and without changing the template either, by grabbing the popover object from the caller's dataand accessing its $tipproperty.

通过从调用方获取 popover 对象data并访问其$tip属性，您可以在不破解 Bootstrap 的情况下完成此操作，也无需更改模板。

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

回答by cbaigorri

There is another way to do this in version 2.3 that is quite simple actually. You override the default template to include the class to the container.

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

回答by Kate

Based on what @bchhun wrote and a lot of head scratching, I felt I should answer my own question, as I got it working. I also noticed this had been favourited and liked, so I hope I'm helping someone else who is a newbie at jQuery like myself.

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

In the current Bootstrap build [v2.1.0], the scripts are all consolidated. So if you have included all of the scripts in your build (and not edited any new lines/taken some out), then head to line 1108 of the un-minified .jsfile. You'll find the following bit of code:

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

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

You're going to be adding a new line to this, which is:

您将为此添加一个新行，即：

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

So now whenever you add data-classto the popover call, it will add the attribute to the <div class="popover">div.

所以现在每当你添加data-class到 popover 调用时，它都会将属性添加到<div class="popover">div。

Now that I see it, it's so obvious :)

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

回答by Etjie

Its an old post but I'm adding it just as reference. Modifying Shankar Cabusanswer, instead of adding the dynamic-class to parent, it will be added in the created .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>
    });
});

Hope this helps :)

希望这可以帮助 ：）

回答by Janusz Krawiec

How about adding that class ONLY to appropriate popover, without targeting others?

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

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

or some variation, like taking custom class name from data of 'someElement', like so:

或一些变体，例如从“someElement”的数据中获取自定义类名，如下所示：

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

回答by kdelmonte

Just set the hidden "template" option when initializing the tooltip. I don't know why the bootstrap team would keep this a secret...

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

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

Hope this helps...

希望这可以帮助...

回答by yuvi

This has been asked a few years ago, and there are plenty of answers. But...I recently had to tackle the same problem myself, and I - (a) wanted to avoid manipulating source code and (b) needed a generic solution to be reused constantly (so using the template: '...'solution for each initialization was out).

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

My solution was simple enough, and is sort of the same as the marked answer - I figured popover is an extensionof the tooltip.jslibrary. I mean - check it out, the source code is barely more than a hundred lines. So I created a file called popover-extend.js, and copy-pasted the entire popover source code in. From there it was easy - simple manipulate these lines:

我的解决办法很简单，而且是那种一样的标记答案-我想通酥料饼是一个扩展了的tooltip.js库。我的意思是 - 看看吧，源代码只有一百多行。所以我创建了一个名为 的文件popover-extend.js，并将整个 popover 源代码复制粘贴到其中。 从那里开始很容易 - 简单地操作这些行：

Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    // add this:
    cls: ''
});

then:

然后：

Popover.prototype.setContent = function () {
    // add this:
    if (this.options.cls) {
        $tip.addClass(this.options.cls);    
    }

Now you can do:

现在你可以这样做：

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

It's a really good approach if you're like me and want to add more functionality. for example, here's how I added a generic close button to the title (though it requires the popover to have a specified id):

如果您像我一样想要添加更多功能，这是一个非常好的方法。例如，这是我在标题中添加通用关闭按钮的方法（尽管它要求弹出窗口具有指定的 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);
}

The cool thing about it, is that everything you set in the DEFAULTS can be configured via html, i.e. if you add a variable named foo, you will be automatically able to manipulate it through data-foo=.

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

Hope this helps anyone looking for an alternative to manipulating source code

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

回答by Jefferson Henrique C. Soares

I had the same problem, I liked the answer of @Kate, but changes in the source file can generate so much problems in the future, you probably will forget these little changes when you update your bootstrap's version. So I found another way of doing that:

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

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

As @CorayThan fix it with data("popover")

由于@CorayThan 修复它 data("popover")

The method tip()of popover returns the popover element, and creates when it is not created, therefore you will alwaysget the correct popover element, even if you are at the initialization of popover (This is my case =D ).

popover的方法tip()返回 popover 元素，并在未创建时创建，因此您将始终获得正确的 popover 元素，即使您处于 popover 的初始化阶段（这是我的情况 =D ）。

回答by bchhun

It's getting late over here and I'm getting tired but here's a quick one-liner that won't work in the future if you decide to update bootstrap's js files.

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

Take a look at the bootstrap-tooltip.js file in this giston line 150.

查看第 150 行此要点中的 bootstrap-tooltip.js 文件。

And here's the modified tooltip in action:

这是修改后的工具提示：

Checkout the inspector's window down there and you'll notice that the dynamic-classhas been added to the tooltip.

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

I'll post a more long-termable & appropriate answer tomorrow.

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

回答by Marius Ilie

This works for me. It is inspired by the bootstrap's documentation from here, the Eventssection.

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

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