Ajouter dynamicment une classe au conteneur ‘popover’ de Bootstrap

J’ai fait des recherches approfondies à la fois dans StackOverflow et dans Google, mais je me suis retrouvé vide. Donc, excuses à l’avance si cela a déjà été demandé et résolu.

NB: Je suis un débutant à jQuery, donc je ne sais pas comment écrire moi-même. Je suis sûr que c’est un extrait de code simple, mais que je ne peux pas le comprendre.

Ce que je cherche à faire est d’utiliser un élément de data- (ex: data-class ou similaire) pour attacher une nouvelle classe (ou un identifiant, je ne suis plus pointilleux!) Au popover de niveau supérieur

. Le code que j’ai actuellement est le suivant:

jQuery:

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

HTML:

  

Et idéalement, le genre de HTML que j’aurais craché est quelque chose comme ceci:

 

Est-ce quelque chose que je peux faire? La documentation sur le site bootstrap pour les popovers est un peu rare, alors il m’a fallu du temps pour arriver à ce point, malheureusement 🙁

Merci d’avance pour toutes les réponses!

Vous pouvez le faire sans pirater Bootstrap et sans modifier le modèle non plus, en saisissant l’object popover à partir des data de l’appelant et en accédant à sa propriété $tip .

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

Il y a 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({ sortinggger: 'click' , template: '

' });

Sur la base de ce que @bchhun a écrit et de beaucoup de grattements de tête, j’ai senti que je devais répondre à ma propre question, alors que je le faisais fonctionner. J’ai aussi remarqué que cela avait été favorisé et aimé, alors j’espère que j’aide quelqu’un d’autre qui est un débutant chez jQuery comme moi.

Dans la version Bootstrap actuelle [v2.1.0], les scripts sont tous consolidés. Donc, si vous avez inclus tous les scripts dans votre construction (et que vous n’avez pas édité de nouvelles lignes / sorties), alors dirigez-vous vers la ligne 1108 du fichier .js non .js . Vous trouverez le bit de code suivant:

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

Vous allez append une nouvelle ligne à ceci:

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

Donc, chaque fois que vous ajoutez data-class de data-class à l’appel popover, cela va append l’atsortingbut à la

.

Maintenant que je le vois, c’est tellement évident 🙂

C’est un ancien message mais je l’ajoute juste comme référence. En modifiant la réponse de Shankar Cabus , au lieu d’append la classe dynamic au parent, elle sera ajoutée dans le div .popover créé.

 $(function(){ $('a[rel=popover]') .popover({ placement : 'bottom', sortinggger : 'hover' }) .on("hover", function(){ $('.popover').addClass($(this).data("class")); //Add class .dynamic-class to 
}); });

J’espère que cela t’aides 🙂

Il suffit de définir l’option “template” 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: '

' }).popover('show');

J’espère que cela t’aides…

Que diriez-vous d’append cette classe UNIQUEMENT au popover approprié, 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 un 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'; }); 

Cela a été demandé il y a quelques années et les réponses sont nombreuses. Mais … j’ai dû récemment faire face au même problème, et (a) je voulais éviter de manipuler le code source et (b) avoir besoin d’une solution générique pour être réutilisée constamment (donc utiliser le template: '...' solution pour chaque initialisation était hors).

Ma solution était assez simple et correspond en quelque sorte à la réponse marquée – je pensais que popover est une extension de la bibliothèque tooltip.js . Je veux dire – vérifiez, 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 de popover. De là, il était facile de manipuler 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:

  

C’est une très bonne approche si vous êtes comme moi et que vous souhaitez append plus de fonctionnalités. Par exemple, voici comment j’ai ajouté un bouton de fermeture générique au titre (même si le popover doit avoir 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 = $("", { "class": "close", "id": "close", "onclick": "$('#"+id+"').popover('hide');" }), title = $tip.find('.popover-title'); btn.html("×"); btn.appendTo(title); } 

Ce qui est intéressant, c’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 quiconque cherche une alternative à la manipulation du code source

J’ai eu le même problème, j’ai aimé la réponse de @Kate, mais les changements dans le fichier source peuvent générer tellement de problèmes à l’avenir, vous allez probablement oublier ces petits changements lorsque vous mettez à 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 le corrige avec des data("popover")

La méthode tip () de popover renvoie l’élément popover et crée quand elle n’est pas créée, vous obtiendrez donc toujours l’élément popover correct, même si vous êtes à l’initialisation du popover (c’est mon cas = D).

Il se fait tard et je commence à être fatigué, mais voici une seule ligne rapide qui ne fonctionnera pas à l’avenir si vous décidez de mettre à jour les fichiers js de bootstrap.

Jetez un coup d’oeil au fichier bootstrap-tooltip.js de cet article à la ligne 150.

Et voici l’info-bulle modifiée en action:

Voici l'info-bulle modifiée en action

Vérifiez la fenêtre de l’inspecteur en bas et vous remarquerez que la classe dynamic a été ajoutée à l’info-bulle.

Je posterai une réponse plus longue et appropriée demain.

Cela fonctionne pour moi. Il est inspiré de la documentation de bootstrap ici , la section Événements .

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

En outre, vous pouvez utiliser les options “template”

 $element.popover({ html: true, sortinggger: 'click', template: '', content: function() { return 'hello'; } }); 

Mettez à jour MY_CLASS à partir de votre atsortingbut de classe de données.

Cela étend votre classe à partir de la classe bootstrap core class , ajoutez simplement la data-class atsortingbut et une option dataClass: true à votre fonction d’ tooltiptooltip

 !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 append une classe sur votre élément popover, vous allez simplement mettre un atsortingbut data-class="classexemple" alors tout fonctionne parfaitement

Retrouvez-nous sur http://www.mixpres.com

Dans Bootstrap 4, vous pouvez utiliser l’atsortingbut data-template :

  

Désolé, mais vous n’avez pas bien compris votre question … Mais ce que vous voulez, c’est append un div parent? Prenez le temps … Voyez si c’est ce que vous voulez:

 $(function(){ $('a[rel=popover]') .popover({ placement : 'bottom', sortinggger : 'hover' }) .on("click", function(){ $(this).closest("div").addClass($(this).data("class")); //Add class .dynamic-class to 
}); });

Démo: http://jsfiddle.net/PRQfJ/

La meilleure option qui fonctionne sur toutes les versions de BS est de la placer dans une classe spécifique et de l’afficher, puis de trouver cette classe et d’append votre nom de classe au popover parrent de cette classe.

 // create a template that add the message inside var $tmp = $("
" + error + "
"); $(this).popover("destroy").popover({ sortinggger: "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 la classe salut

Voici ma solution de contournement, probablement pas la plus efficace mais je la trouve la plus simple à mettre en œuvre.

  $('[data-content]').each(function(){ var options = { html: true //optional }; if ($(this)[0].hasAtsortingbute('data-class')) { options['template'] = '

'; } $(this).popover(options); });

Ajoutez simplement data-class="custom-class" à l’élément comme les autres exemples.

Vous pouvez utiliser l’option container pour contourner ce problème.

 $('[data-toggle="popover"]').popover({ container: '#foo' }); 

ou le définir via un atsortingbut de balise

 Foo 

Et ajoutez ceci quelque part avant de fermer la balise body

 

Ensuite, vous pourriez faire quelque chose comme #foo > .popover . Je sais que ce n’est pas une solution universelle, mais une façon de le faire.

 $('a[rel=popover]') .popover({ placement: 'bottom', sortinggger: 'hover' }) .data('bs.popover') .addAttachmentClass('my-own-popover') 

Vous obtiendrez la bs-popover-my-own-popover dans l’élément .popover .

Je ne suis pas sûr de savoir pourquoi vous voulez faire cela, mais dans mon exemple, je voulais juste définir un style personnalisé … Donc, en CSS, il suffit d’écrire le bon sélecteur pour le popover actuel. a.rating-popover – c’est mon lien pour ouvrir popover. -> l’élément popover sera généré à la prochaine de cet élément. afin que nous puissions le sélectionner avec

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

et le tour est joué, fond bleu. pour les popovers ouverts uniquement avec un élément.rating-popover.