我们如何更改引导弹出窗口中箭头的颜色？答案

【问题标题】：How can we change the color of arrow in the popover of bootstrap?我们如何更改引导弹出窗口中箭头的颜色？
【发布时间】：2021-11-04 02:47:38
【问题描述】：

  <div class="  affix  popover right" id ="one" style="margin-left:8em;margin-top:10em;  width:15em;background-color:rgba(228,19,47,0.9);padding:5px;border-radius:10px;">
    <div class="arrow" style="margin-top:-45px;"></div> 
    <center style="padding:20px;"><b>this is the message</b></center>
 </div>

这段代码创建了一个带有箭头的弹出框，我们如何改变这个箭头的颜色。

【问题讨论】：

看看这个答案：stackoverflow.com/a/38279489/3554107。对于每个方向箭头的样式，我们必须使用 CSS 属性选择器选择每个箭头，然后单独设置它们。
Styling the arrow on bootstrap tooltips的可能重复

标签： css twitter-bootstrap

【解决方案1】：

使用这个css改变pseudo元素的右边框颜色：

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

#DEMO

【讨论】：

这显然改成了border-top-color，但效果很好！

【解决方案2】：

在 Bootstrap 4 中，

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: yellow; // Any color here
}

【讨论】：

在没有第二个标识符“.bs-popover-auto[x-placement^="top"] .arrow::after”的情况下似乎可以正常工作。有什么我不知道这应该是必需的吗？

【解决方案3】：

在 Bootstrap 3 中使用标准弹出框，如下所示：

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="this is the message">
  Popover on right
</button>

您可以将以下 css 添加到您的自定义规则中：

.popover {
  background-color: red; /*substitute 'red' with your color of choice*/
  border-color: red;
}
.popover.right>.arrow:after {
  border-right-color: red;
}
.popover-content {
  background-color: red;
}

【讨论】：

【解决方案4】：

我发现您需要为弹出框的每个可能位置覆盖一个类。在此示例中，我的“游览”弹出框具有深色背景和白色文本：

.popover[class*=tour-] {
    background: #434A54;
    color: white;
}

/* Needed to have the triangle match the grey background of the popover */
.popover[class*=tour-].top .arrow:after {
    border-top-color: #434A54;
}

.popover[class*=tour-].right .arrow:after {
    border-right-color: #434A54;
}

.popover[class*=tour-].bottom .arrow:after {
    border-bottom-color: #434A54;
}

.popover[class*=tour-].right .arrow:after {
    border-left-color: #434A54;
}

【讨论】：

【解决方案5】：

[带箭头和背景颜色的引导弹出框]

.popover{
   background: #ebd997;
    height: 100px;
    width: 500px;
}

.popover.top> .arrow:after {
    border-top-color: #ebd997;
}

【讨论】：

【解决方案6】：

不确定，但您可以尝试更改

<div class="arrow" style="margin-top:-45px;"></div>

到

<div class="arrow" style="margin-top:-45px; color: red;"></div>

希望这会有所帮助。

问候，亚历克斯

【讨论】：

【解决方案7】：

使用 bootstrap 4 弹出框模板

template: "<div class=" popover yellow" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>"



.yellow .arrow::after {
        border-top-color: black;
        border-bottom-color: black;
    }

【讨论】：

【解决方案8】：

如果您使用Angular2/4/5 和NGX-Bootstrap，我设法用CSS 将其更改为普通文本上的click 以弹出顶部。其他不起作用，因为未使用 container="body"。在angular 他们创建 [_nghost-c0] 如果你使用 container="body"。

  :host /deep/.popover.top > .arrow:after 
{
     border-top-color: red;
}
:host/deep/.curvepopover{
    border-radius:10px;
    border:4px solid red;
    
}

【讨论】：

【解决方案9】：

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: $blue; // Any color here
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: $blue; // Any color here
}

【讨论】：

【解决方案10】：

在引导程序 5 中：

.bs-popover-top .popover-arrow:after {
    border-top-color: red;
}

.bs-popover-bottom .popover-arrow:after {
    border-bottom-color: red;
}

.bs-popover-start .popover-arrow:after {
    border-left-color: red;
}

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

【讨论】：