动态地向 Bootstrap 的“popover"容器添加一个类 [英] Dynamically add a class to Bootstrap's 'popover' container

问题描述

我已经彻底搜索了 StackOverflow 和 Google，但结果是空的.如果有人问过这个问题，请提前道歉&已经解决了.

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

我想要做的是使用 data- 元素(例如:data-class 或类似的)来附加一个新类(或 ID，我'我不再挑剔了！)到顶级弹出框

.我目前拥有的代码如下:

jQuery:

$('a[rel=popover]').popover({位置:'底部'，触发器:'悬停'}).click(功能(e){e.preventDefault()});

HTML:

<a href="" rel="popover" data-class="dynamic-class" title="标题在此处" data-content="内容在此处">

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

<!-- 弹出窗口代码的其余部分与往常一样-->

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

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

解决方案

通过从调用者的 data 中获取 popover 对象并访问其$tip 属性.

$('a[rel=popover]').popover({ 位置: '底部', 触发器: '悬停' }).data('bs.popover').提示().addClass('my-super-popover');

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

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.

What I'm looking to do is use a data- element (eg: data-class or 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:

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

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

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

解决方案

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

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

这篇关于动态地向 Bootstrap 的“popover"容器添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！