Ajoutez dynamiquement une classe à Bootstrap-#39;s '#39;popover'#39; conteneur

Question

J'ai minutieusement fouillés par les deux StackOverflow et Google, mais rien non plus. Alors, toutes mes excuses à l'avance si cela a été demandé & résolus déjà.

NB: je suis un débutant en jQuery, donc je ne sais pas comment écrire ça moi-même. Je suis sûr que c'est un simple bout de code, mais ne peut pas envelopper la tête autour de lui.

Ce que je cherche à faire est d'utiliser un data- élément (par exemple: data-class ou similaire) pour fixer une nouvelle classe (Ou l'ID, je ne suis pas pointilleux plus!) pour le haut-niveau de la liste <div>. Le code que j'ai actuellement est comme suit:

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

Idéalement, le genre de HTML, j'aurais craché, c'est quelque chose comme ceci:

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

Est-ce quelque chose que je peux faire? La documentation sur le bootstrap site pour les popovers est un peu clairsemée, ça m'a pris un certain temps juste pour arriver à ce point, malheureusement :(

Merci d'avance pour tous & toutes les réponses!

Answer 1

Vous pouvez le faire sans pirater Bootstrap et sans changer le modèle non plus, en saisissant l'objet popover de l'appelant et en accédant à sa propriété.

Answer 2

Il ya une autre façon de le faire dans la version 2.3 qui est assez simple en fait. Vous dépassez le modèle par défaut pour inclure la classe dans le conteneur.

Answer 3

Basé sur ce que @bchhun écrit et beaucoup de casse-tête, j'ai senti que je devais répondre à ma propre question, comme je l'ai eu à travailler. J'ai aussi remarqué que cela avait été favourited et aimé, donc j'espère que je vais aider quelqu'un d'autre qui est un débutant en jQuery comme moi.

Dans le courant de Bootstrap de construction [v2.1.0], les scripts de tous les états. Donc, si vous avez inclus tous les scripts dans votre construction (et non édités toutes les nouvelles lignes/pris), puis le tête de ligne 1108 de l'onu-minifiés .js le fichier. Vous trouverez le code suivant:

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

Vous allez ajouter une nouvelle ligne à ce, qui est:

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

Alors maintenant, chaque fois que vous ajoutez data-class à la liste d'appel, il va ajouter l'attribut de l' <div class="popover"> div.

Maintenant que je vois ça, c'est tellement évident :)

Answer 4

C'est un vieux post, mais je l'ajoute juste comme référence. Modifier Shankar Cabus réponse, au lieu d'ajouter la classe dynamique au parent, il sera ajouté dans le div créé .popover.

J'espère que cela aide :)

Answer 5

Il suffit de définir l'option "template" cachée lors de l'initialisation de l'outil. Je ne sais pas pourquoi l'équipe bootstrap garderait cela secret ...

J'espère que cela aide ...