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; }
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.