为popover引导程序的指针赋予背景色

Question

我想为弹出框的指向元素提供背景色。我该怎么办？ jsfiddle输入代码

.popover{
   background:rgba(128, 21, 21,0.8);
   font-weight: bold;
   border-radius: 2%;
}
.popover-body{
   background:rgba(128, 21, 21,0.8);
   color: #ffffff;
}

Answer 1

如果是引导工具提示，请尝试下面编写的代码

.tooltip.top .tooltip-arrow {
    border-top-color: #870a17; /* or what ever color you want*/
}

，但仅当它带有top选项的引导工具提示（如果您需要提供其他代码）时，该功能才起作用。

Answer 2

如果是引导程序，请在CSS中搜索。必须存在像.bs-popover-top .arrow::before这样的当前班级。

进行更改，或者您可以像下面这样编写自己的内容。[注意：您可以根据代码更改类名]

  

.bs-popover-top .arrow :: before {   border-top-color：＃f00;   }

Answer 3

自定义颜色弹出框

看完bootstrap v4.1.3 css文件后：

您要搜索的CSS是.popover .arrow::after CSS规则。
但是更改此设置将更改您网站上的所有弹出窗口。
因此，我们想选择一个自定义类。在示例中为.custom。

示例：

$(function() {
  let e = $('[data-toggle="popover"]').popover().data('bs.popover').getTipElement();
  console.log(e);
  $(e).addClass("custom");
});

.popover {}

.custom .popover-body {
  background-color: red;
}

.custom .popover-header {
  background-color: darkred;
}

.custom .arrow {}

.custom.popover .arrow::after {
  border-right-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<button type="button" class="btn btn-lg btn-danger custom" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

所以解释是：

• 使用javascript将类添加到弹出框（在上面的示例中，该类为“自定义”）
• 以更高的特异性添加您自己的CSS规则。
• 记住正确的样式。 （它是一个CSS三角形）