将CSS应用于Bootstrap中的popover

Question

我想在Bootstrap中将自定义CSS应用于popover的标题和内容,但是,似乎我的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/

Answer 1

原因似乎是javascript正在创建全新的元素来显示popover本身.这些新元素具有与原始元素不同的css类名.

尝试将此添加到您的CSS:

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

更新

根据您使用的库版本,名称可能不同.如果上述方法无效,请尝试使用.popover-header而.popover-body不是.

Answer 2

新创建的元素具有以下层次结构:

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

在触发弹出框的元素之后注入(您可以通过设置container选项为注入的弹出窗口指定特定容器,在这种情况下,您将使用作为容器传递的元素设置样式).因此,要设置popover样式,您可以使用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>

Answer 3

如果页面上有多个弹出框，并且只想设置其中一个的样式，则可以利用弹出框的template选项添加另一个类：

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

我开始只使用默认值template从文档，并添加my-specific-popover到类属性。