Je souhaite appliquer un code CSS personnalisé au titre et au contenu d'un fichier popover dans Bootstrap. Toutefois, il semble que mon code CSS est 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/
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'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 d’utiliser .popover-header
et .popover-body
au lieu.
Les éléments nouvellement créés 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 définissant l'option container
, auquel cas vous définissez les styles à l'aide de l'élément que vous avez transmis en tant que conteneur). Donc, pour dénommer une popover, vous pouvez utiliser css comme dans 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 popovers sur votre page et que vous souhaitez n'en nommer que l'un des deux, vous pouvez utiliser l'option template
du popover pour ajouter une autre classe:
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
J'ai commencé en utilisant simplement la valeur par défaut pour template
à partir de docs , puis j'ai ajouté my-specific-popover
à l'attribut de classe.