Html 将 CSS 应用于 Bootstrap 中的 popover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17884750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS to popover in Bootstrap
提问by MLister
I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.
我想将自定义 CSS 应用于 Bootstrap 中弹出窗口的标题和内容，但是，似乎我的 CSS 被忽略了。
How can I apply specific CSS to the title and the content respectively?
如何将特定的 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>For example: http://jsfiddle.net/Mx4Ez/
回答by Matt Pinkston
The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.
原因似乎是 javascript 正在创建全新的元素来显示弹出窗口本身。这些新元素具有与原始元素不同的 css 类名称。
Try adding this to your css:
尝试将其添加到您的 css 中：
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
Update
更新
Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-headerand .popover-bodyinstead.
根据您使用的库版本，名称可能不同。如果上述方法不起作用，请尝试使用.popover-headerand.popover-body代替。
回答by isapir
The newly created elements have the following hierarchy:
新创建的元素具有以下层次结构：
.popover
|_ .popover-title
|_ .popover-content
Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the containeroption, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:
在触发弹出窗口的元素之后注入（您可以通过设置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>
回答by jobo3208
If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's templateoption to add another class:
如果您的页面上有多个弹出框并且只想为其中一个设置样式，则可以利用弹出框的template选项添加另一个类：
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
I started by just using the default value for templatefrom the docs, and added my-specific-popoverto the class attribute.
我开始只使用默认值template从文档，并添加my-specific-popover到类属性。
