在 Bootstrap 中将 CSS 应用于弹出窗口

Question

我想将自定义 CSS 应用于 Bootstrap 中弹出框的标题和内容，但是，我的 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/

原文由 MLister 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

尝试将此添加到您的CSS：

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

更新

根据您使用的库版本，名称可能会有所不同。如果上述方法不起作用，请尝试使用 .popover-header 和 .popover-body 代替。

原文由 Matt Pinkston 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

我首先使用 文档 中 template 的默认值，并将 my-specific-popover 添加到类属性中。

原文由 jobo3208 发布，翻译遵循 CC BY-SA 3.0 许可协议