Appliquer CSS à popover dans Bootstrap
je veux appliquer 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",
trigger: "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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
<a id="poplink" href="javascript:void(0);">Pop</a>
<div class="pop-title">Title here</div>
<div class="pop-content">Content here</div>
</div>Par exemple: http://jsfiddle.net/Mx4Ez/
3 réponses
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 l'original.
essayez d'ajouter ceci à votre css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
mise à 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 et .popover-body à la place.
nouvellement créés, Les éléments ont la hiérarchie suivante:
.popover
|_ .popover-title
|_ .popover-content
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 réglant le container option, auquel cas vous définirez les styles en utilisant l'élément que vous avez passé en conteneur). Ainsi, pour le style d'un popover, vous pouvez utiliser css comme l'exemple suivant:
<div id="my-container">
<a href="#" id="popover-trigger">Popover This!</a>
</div>
<style>
.popover-title { color: green; } /* default title color for all popovers */
#my-container .popover-title { color: red; } /* specific popover title color */
</style>
si vous avez plusieurs popover sur votre page et que vous ne voulez en styliser qu'un, vous pouvez utiliser le popover template option pour ajouter une autre classe:
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
j'ai commencé par utiliser la valeur par défaut pour template docs, et a ajouté my-specific-popover à l'attribut class.