我已经彻底搜索了StackOverflow和谷歌,但是空洞了。如果有人提出要求,请提前道歉。已经解决了。
NB:我是jQuery的新手,所以我不确定如何自己写这个。我确信这是一个简单的代码片段,但无法绕过它。
我要做的是使用data-
元素(例如:data-class
或类似的元素)来附加一个新类(或ID,我不再挑剔了!)到顶部-level 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>
这是我能做的吗?弹出窗口的引导网站上的文档有点稀疏,所以我花了一段时间才到达这一点,不幸的是:(
提前感谢任何&amp;所有回复!
答案 0 :(得分:66)
你可以通过从调用者的data
抓取popover对象并访问其$tip
属性,在不破解Bootstrap且不更改模板的情况下执行此操作。
$('a[rel=popover]')
.popover({ placement: 'bottom', trigger: 'hover' })
.data('bs.popover')
.tip
.addClass('my-super-popover');
答案 1 :(得分:46)
在版本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>'
});
答案 2 :(得分:22)
基于@bchhun所写的内容和大量的头脑,我觉得我应该回答我自己的问题,因为我已经开始工作了。我也注意到这一点很受欢迎和喜欢,所以我希望我能像我一样帮助其他jQuery新手。
在当前的Bootstrap构建[v2.1.0]中,脚本全部合并。因此,如果您已在构建中包含所有脚本(并且未编辑任何新行/取出一些),则转到未缩小的.js
文件的第1108行。您将找到以下代码:
$tip
.css(tp)
.addClass(placement)
.addClass('in')
您将要添加一个新行,即:
.addClass(this.$element.attr("data-class"))
现在,每当您向弹出式调用添加data-class
时,它都会将该属性添加到<div class="popover">
div。
现在我看到它,它是如此明显:)
答案 3 :(得分:16)
它是一个旧帖子,但我只是作为参考添加它。修改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>
});
});
希望这会有所帮助:)
答案 4 :(得分:9)
初始化工具提示时,只需设置隐藏的“模板”选项即可。我不知道为什么引导团队会保守这个秘密...
$(elem).popover({
template: '<div class="popover YOURCLASS"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}).popover('show');
希望这会有所帮助......
答案 5 :(得分:8)
几年前就有人提出这个问题,并且有很多答案。 但是...... 我最近不得不自己解决同样的问题,而我 - (a)想避免操纵源代码,(b)需要一个通用的解决方案来不断重用(所以使用{每个初始化的解决方案都是{1}}。
我的解决方案很简单,与标记的答案有点相似 - 我认为popover是 template: '...'
库的扩展名。我的意思是 - 检查一下,源代码是barely more than a hundred lines。所以我创建了一个名为tooltip.js
的文件,并在其中复制粘贴了整个popover源代码。
从那里很容易 - 简单地操纵这些线:
popover-extend.js
然后:
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);
}
如果你像我一样想要添加更多功能,这是一个非常好的方法。例如,这是我如何在标题中添加一个通用关闭按钮(虽然它要求popover具有指定的id):
<a href="#" rel="popover"
data-cls="dynamic-class"
title="Title goes here" data-content="Content goes here">
关于它的一个很酷的事情是,您在DEFAULTS中设置的所有内容都可以通过html进行配置,即如果您添加名为// 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);
}
的变量,您将能够自动通过foo
来操作它
希望这可以帮助任何寻找替代操作源代码的人
答案 6 :(得分:8)
如何将该类仅添加到适当的弹出窗口,而不是针对其他人?
$('#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';
});
答案 7 :(得分:5)
我有同样的问题,我喜欢@Kate的答案,但是源文件中的更改将来会产生很多问题,当你更新bootstrap的版本时,你可能会忘记这些小改动。所以我找到了另一种方法:
$(element).popover({...}).data("popover").tip().addClass("your_class")
@CorayThan用data("popover")
popover的方法 tip()返回popover元素,并在未创建时创建,因此即使您有始终,也会获得正确的popover元素是在弹出窗口的初始化(这是我的情况= D)。
答案 8 :(得分:3)
现在已经很晚了,而且我已经累了但是如果您决定更新bootstrap的js文件,这将是一个快速的单行程,将来无法使用。
在第150行的gist中查看bootstrap-tooltip.js文件。
这是经过修改的工具提示:
在那里查看检查员的窗口,您会注意到动态类已添加到工具提示中。
我会发布一个更长久的&amp;明天适当回答。
答案 9 :(得分:2)
这对我有用。它的灵感来自here的引导程序文档,事件部分。
$("a[rel=popover]").popover().on("show.bs.popover", function(){
$(".popover").addClass("your-custom-class");
});
答案 10 :(得分:2)
您也可以使用'模板'选项
$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';
}
});
从您的data-class属性更新MY_CLASS。
答案 11 :(得分:1)
$('a[rel=popover]')
.popover({ placement: 'bottom', trigger: 'hover' })
.data('bs.popover')
.addAttachmentClass('my-own-popover')
您将在bs-popover-my-own-popover
元素中获得.popover
类。
答案 12 :(得分:1)
这会将您的课程从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);
答案 13 :(得分:1)
对于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
答案 14 :(得分:1)
在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>
答案 15 :(得分:0)
此问题的最佳解决方案是扩展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
中找到完整的版本和说明。这是Brian Woodward作品的更新版本。
答案 16 :(得分:0)
我知道这个线程很旧,但是对于像我一样偶然发现本文的人来说,这是另一种允许更多自定义的方法。我尚未在Bootstrap 4中对其进行测试,但在Bootstrap 3中对其进行了测试。
您可以使用自定义数据属性通过html元素将CSS类“提交”到弹出窗口,而不是在函数中对类进行硬编码。在此示例中,我将该属性称为“数据类”。
由于此方法利用了popover的“ placement”选项的可用功能,因此我对其进行了配置,以保留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'
});
我希望这会有所帮助。如果有人有更好或更干净的方法,我将很高兴学习:)
答案 17 :(得分:0)
您可以使用container
选项解决此问题。
$('[data-toggle="popover"]').popover({
container: '#foo'
});
或通过标记属性设置
<a href="#" data-toggle="popover" data-container="#foo" data-content="Content">Foo</a>
在关闭body标签之前将其添加到某处
<div id="foo"></div>
然后你可以做#foo > .popover
之类的事情。我知道这不是一个通用的解决方案,但它只是一种方法。
答案 18 :(得分:0)
这是我的解决方法,可能不是最有效的,但我发现它最容易实现。
$('[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"
添加到元素中,就像其他示例一样。
答案 19 :(得分:0)
适用于BS的每个版本的最佳选项是将其设置在一个specefic类中,并在显示之后,找到该类,并将您的类名添加到其中的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将有你好类
答案 20 :(得分:0)
抱歉,但不太明白你的问题...但你想要的是添加一个父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>
});
});
答案 21 :(得分:-1)
我不确定你为什么要这样做,但在我的例子中,我只是想设置自定义样式......所以在CSS中只为当前的popover编写了正确的选择器。 a.rating-popover - 这是我打开popover的链接。 - &GT; popover元素将生成到该元素的下一个元素。 所以我们可以用
选择它a.rating-popover + div.popover{
background: blue;
}
和瞧,蓝色背景。仅用于使用a.rating-popover元素打开的弹出窗口。