Appliquer le CSS au popover dans Bootstrap

Je veux appliquer un CSS personnalisé au titre et au contenu d’un popover dans Bootstrap, cependant, il semble que mon CSS soit ignoré.

Comment puis-je appliquer des CSS spécifiques au titre et au contenu respectivement?

$("#poplink").popover({ html: true, placement: "right", sortinggger: "hover", title: function () { return $(".pop-title").html(); }, content: function () { return $(".pop-content").html(); } }); 
 html, body { width: 100%; height: 100%; } .pop-div { font-size: 13px; margin-top: 100px; } .pop-title { display: none; color: blue; font-size: 15px; } .pop-content { display: none; color: red; font-size: 10px; } 
    
Pop
Title here
Content here

Par exemple: http://jsfiddle.net/Mx4Ez/

La raison semble être que le javascript crée de nouveaux éléments pour afficher le popover lui-même. Ces nouveaux éléments ont des noms de classe css différents de ceux d’origine.

Essayez d’append ceci à votre css:

 .popover-title { color: blue; font-size: 15px; } .popover-content { color: red; font-size: 10px; } 

Mettre à jour

Selon la version de la bibliothèque que vous utilisez, les noms peuvent être différents. Si ce qui précède ne fonctionne pas, essayez .popover-header utiliser .popover-header et .popover-body .

Les éléments nouvellement créés ont la hiérarchie suivante:

 .popover |_ .popover-title |_ .popover-content 

Ce qui est injecté après l’élément qui déclenche le popover (vous pouvez spécifier un conteneur spécifique pour le popover injecté en définissant l’option container , auquel cas vous définissez les styles en utilisant l’élément que vous avez transmis en tant que conteneur). Pour styliser un popover, vous pouvez utiliser css comme l’exemple suivant:

   

Si vous avez plusieurs fenêtres pop-up sur votre page et que vous souhaitez uniquement en définir une, vous pouvez utiliser l’option de template la fenêtre popover pour append une autre classe:

 $("#myElement").popover({ template: ' 

J’ai commencé par utiliser simplement la valeur par défaut pour le template partir de la documentation , et my-specific-popover ajouté my-specific-popover à l’atsortingbut de classe.