web-dev-qa-db-ja.com

BootstrapでポップオーバーにCSSを適用する

BootstrapのポップオーバーのタイトルとコンテンツにカスタムCSSを適用したいのですが、私のCSSは無視されているようです。

特定のCSSをタイトルとコンテンツにそれぞれ適用するにはどうすればよいですか？

$("#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>

例： http://jsfiddle.net/Mx4Ez/

htmlcsstwitter-bootstrappopover
43
MLister

理由は、JavaScriptがポップオーバー自体を表示するためのまったく新しい要素を作成しているためと思われます。これらの新しい要素には、元のものとは異なるcssクラス名があります。

これをcssに追加してみてください：

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

更新

使用しているライブラリのバージョンに応じて、名前は異なる場合があります。上記が機能しない場合は、.popover-headerおよび.popover-body代わりに。

65
Matt Pinkston

新しく作成された要素には、次の階層があります。

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

ポップオーバーをトリガーする要素の後に挿入されます（containerオプションを設定することにより、挿入されたポップオーバーに特定のコンテナを指定できます。この場合、コンテナとして渡した要素を使用してスタイルを設定します）。したがって、ポップオーバーのスタイルを設定するには、次の例のようなcssを使用できます。

<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

ページに複数のポップオーバーがあり、そのうちの1つだけをスタイルする場合は、ポップオーバーのtemplateオプションを利用して別のクラスを追加できます。

$("#myElement").popover({
  template: '<div class="popover my-specific-popover" role="tooltip">...'
});

docs のtemplateのデフォルト値を使用することから始め、my-specific-popoverをクラス属性に。

6
jobo3208