web-dev-qa-db-fra.com

Appliquer le CSS à la popover Bootstrap

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/

htmlcsstwitter-bootstrappopover
43
MLister

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.

65
Matt Pinkston

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>
8
isapir

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.

6
jobo3208