Ajouter dynamiquement une classe au conteneur 'popover' de Bootstrap
J'ai effectué une recherche approfondie dans StackOverflow et Google, mais je suis vide. Donc, excuses à l'avance si cela a déjà été demandé et résolu.
NB: Je suis un débutant chez jQuery, je ne sais donc pas comment écrire cela moi-même. Je suis sûr que ceci est un extrait de code simple, mais je ne peux pas comprendre.
Ce que je cherche à faire est d’utiliser un élément data- (par exemple: data-class ou similaire) pour attacher une nouvelle classe (ou ID, je ne suis plus difficile!) Au popcode de niveau supérieur <div>. Le code que j'ai actuellement est le suivant:
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">
Et idéalement, le type de HTML que j'aurais craché ressemblerait à ceci:
<div class="popover ... dynamic-class">
<!-- remainder of the popover code as per usual -->
</div>
Est-ce que je peux faire quelque chose? La documentation sur le site d'amorçage pour popovers est un peu clairsemée, donc il m'a fallu un moment pour arriver à ce point, malheureusement :(
Merci d'avance pour toutes les réponses!
Vous pouvez le faire sans pirater Bootstrap et sans changer le modèle, en récupérant l'objet popover dans la variable data de l'appelant et en accédant à sa propriété $tip.
$('a[rel=popover]')
.popover({ placement: 'bottom', trigger: 'hover' })
.data('bs.popover')
.tip
.addClass('my-super-popover');
Il existe une autre façon de faire cela dans la version 2.3 qui est assez simple en fait. Vous remplacez le modèle par défaut pour inclure la classe dans le conteneur.
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>'
});
Sur la base de ce que @bchhun a écrit et de nombreuses critiques, j'ai pensé que je devais répondre à ma propre question, car je la faisais fonctionner. J'ai également remarqué que cela avait été apprécié et apprécié, j'espère donc pouvoir aider quelqu'un d'autre novice chez jQuery comme moi.
Dans la version actuelle de Bootstrap [v2.1.0], les scripts sont tous consolidés. Donc, si vous avez inclus tous les scripts dans votre construction (et n'avez pas édité de nouvelles lignes/en avons retiré quelques-unes), passez à la ligne 1108 du fichier .js non réduit. Vous trouverez le code suivant:
$tip
.css(tp)
.addClass(placement)
.addClass('in')
Vous allez ajouter une nouvelle ligne à ceci, qui est:
.addClass(this.$element.attr("data-class"))
Alors maintenant, chaque fois que vous ajoutez data-class à l'appel popover, cela ajoutera l'attribut à <div class="popover"> div.
Maintenant que je le vois, c'est tellement évident :)
C'est un ancien post mais je l'ajoute juste comme référence. Modifier Shankar Cabus answer, au lieu d’ajouter la classe dynamique au parent, il sera ajouté au fichier .popover créé.
$(function(){
$('a[rel=popover]')
.popover({
placement : 'bottom',
trigger : 'hover'
})
.on("hover", function(){
$('.popover').addClass($(this).data("class")); //Add class .dynamic-class to <div>
});
});
J'espère que cela t'aides :)
Il suffit de définir l’option "modèle" masquée lors de l’initialisation de l’info-bulle. Je ne sais pas pourquoi l'équipe de bootstrap garderait ç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');
J'espère que cela t'aides...
Cette question a été posée il y a quelques années et les réponses ne manquent pas. Mais ... J'ai récemment eu à résoudre le même problème moi-même, et je - (a) voulais éviter de manipuler le code source et (b) j'avais besoin d'une solution générique à réutiliser constamment (utilisez donc la solution template: '...' pour chaque l'initialisation était terminée).
Ma solution était assez simple, et est en quelque sorte la même que la réponse marquée - je me suis dit que popover est une extension de la bibliothèque tooltip.js. Je veux dire - check it out, le code source est à peine plus de cent lignes . J'ai donc créé un fichier appelé popover-extend.js et copié-collé l'intégralité du code source popover dans . À partir de là, c'était facile - manipulez simplement ces lignes:
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
// add this:
cls: ''
});
puis:
Popover.prototype.setContent = function () {
// add this:
if (this.options.cls) {
$tip.addClass(this.options.cls);
}
Maintenant vous pouvez faire:
<a href="#" rel="popover"
data-cls="dynamic-class"
title="Title goes here" data-content="Content goes here">
C'est une très bonne approche si vous êtes comme moi et souhaitez ajouter davantage de fonctionnalités. Par exemple, voici comment j'ai ajouté un bouton de fermeture générique au titre (bien que cela nécessite que le popover ait un identifiant spécifié):
// 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);
}
La bonne chose à ce sujet est que tout ce que vous définissez dans DEFAULTS peut être configuré via HTML, c’est-à-dire que si vous ajoutez une variable nommée foo, vous pourrez automatiquement la manipuler via data-foo=.
J'espère que cela aidera tous ceux qui recherchent une alternative à la manipulation du code source
Pourquoi ne pas ajouter cette classe UNIQUEMENT à la popover appropriée, sans cibler les autres?
$('#someElement').popover({placement: function(context, src) {
$(context).addClass('my-custom-class');
return 'top'; // - 'top' placement in my case
});
ou une variante, comme prendre le nom de classe personnalisé à partir des données de 'someElement', comme ceci:
$('#someElement').popover({placement: function(context, src) {
$(context).addClass($(src).data('customClassName'));
return 'top';
});
J'avais le même problème, la réponse de @Kate me plaisait, mais les modifications apportées au fichier source peuvent générer tant de problèmes à l'avenir que vous oublierez probablement ces petites modifications lorsque vous mettrez à jour la version de votre bootstrap. J'ai donc trouvé un autre moyen de le faire:
$(element).popover({...}).data("popover").tip().addClass("your_class")
Comme @CorayThan résoudre le problème avec data("popover")
La méthode tip ()} de popover renvoie l'élément popover et crée quand il n'est pas créé. Par conséquent, vous obtenez toujours l'élément correct, même si vous êtes à l'initialisation popover (c'est mon cas = D).
Ici, il se fait tard et je commence à être fatigué, mais voici un one-line qui ne fonctionnera plus si vous décidiez de mettre à jour les fichiers js de bootstrap.
Jetez un coup d'œil au fichier bootstrap-tooltip.js dans ce Gist à la ligne 150.
Et voici l'info-bulle modifiée en action:
Consultez la fenêtre de l'inspecteur et vous remarquerez que la classe dynamic-class a été ajoutée à l'info-bulle.
Je posterai une réponse plus durable et appropriée demain.
Cela fonctionne pour moi. Il s’inspire de la documentation de bootstrap de here , de la section Events.
$("a[rel=popover]").popover().on("show.bs.popover", function(){
$(".popover").addClass("your-custom-class");
});
Aussi, vous pouvez utiliser les options 'template'
$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';
}
});
Mettez à jour MY_CLASS à partir de votre attribut de classe de données.
Dans Bootstrap 4, vous pouvez utiliser l'attribut 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>
Ceci étend votre classe de l'extérieur bootstrap core class, ajoutez simplement l'attribut data-class et une option dataClass: true à votre fonction 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);
pour bootstrap v3.3.2 vous trouvez ces lignes sur bootstrap.js
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
.data('bs.' + this.type, this)
Ensuite, vous ajoutez cette ligne
.addClass(this.$element.attr("data-class"))
Maintenant, pour ajouter une classe à votre élément popover, vous allez simplement mettre un attribut data-class="classexemple" puis tout fonctionne parfaitement
Retrouvez nous sur www.mixpres.com
$('a[rel=popover]')
.popover({ placement: 'bottom', trigger: 'hover' })
.data('bs.popover')
.addAttachmentClass('my-own-popover')
Vous obtiendrez la classe bs-popover-my-own-popover dans l'élément .popover.
Désolé, mais vous n'avez pas bien compris votre question ... Mais ce que vous voulez, c'est ajouter un parent div? Allez-y doucement ... Voyez si c'est ce que vous voulez:
$(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>
});
});
la meilleure option qui fonctionne sur chaque version de BS est de la placer dans une classe specefic et, après avoir montré cela, de trouver cette classe et d’ajouter votre nom de classe pour en faire un survol.
// 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");
Maintenant, votre popover aura hello class
Voici ma solution de contournement, probablement pas la plus efficace mais je l’ai trouvée la plus facile à mettre en œuvre.
$('[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);
});
Ajoutez simplement data-class="custom-class" à l'élément comme les autres exemples.
La meilleure solution à ce problème consiste à étendre le popover et à créer votre propre version de Popover. Le code ci-dessous est basé sur la version 3.3.7 de bootstrap
(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);
Usage
Code 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>
Script JS
jQuery(document).ready(function($) {
$('[rel="popover"]').popoverex();
});
Vous trouverez la version complète et la description de cette page git https://Gist.github.com/vinoddC/475669d94e97f4d7b6fcfde4cef80420
C'est une version mise à jour du travail de Brian Woodward.
Vous pouvez utiliser l'option container pour résoudre ce problème.
$('[data-toggle="popover"]').popover({
container: '#foo'
});
ou le définir via un attribut tag
<a href="#" data-toggle="popover" data-container="#foo" data-content="Content">Foo</a>
Et ajoutez ceci quelque part avant de fermer la balise body
<div id="foo"></div>
Ensuite, vous pourriez faire quelque chose comme #foo > .popover. Je sais que ce n’est pas une solution universelle, mais c’est une façon de le faire.