我们怎样才能改变bootstrap popover中箭头的颜色？

Question

  <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>

此代码使用箭头创建弹出窗口，我们如何更改此箭头的颜色。

Answer 1

使用此css更改psudo元素的右边颜色：

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

DEMO

Answer 2

在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;
}

Answer 3

我发现你需要为popover的每个可能位置覆盖一个类。在这个例子中，我的＆＃34;巡演＆＃34; popover有深色背景和白色文字：

.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;
}

Answer 4

[带箭头和背景颜色的Bootstrap Popover]

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

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

Answer 5

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

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

到

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

希望这有帮助。

此致 亚历

Answer 6

在Bootstrap 4中，

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

Answer 7

如果您使用Angular2/4/5，NGX-Bootstrap我设法使用CSS进行更改，click就普通文本进行修改，以便在顶部进行修改。其他的不起作用，因为容器=＆＃34; body＆＃34;未使用。在他们创造的angular中 [_nghost-c0]如果你使用container =＆＃34; body＆＃34;。

＆＃13;

＆＃13;

[02/28/18 20:39:30]  npm run debug

> pq-api@1.0.0 debug C:\Users\joe\pq\pq-api
> nodemon  --verbose  --watch src/**/* -e ts,json --exec ts-node --inspect ./src/server.ts

[nodemon] 1.15.1
[nodemon] to restart at any time, enter `rs`
[nodemon] or send SIGHUP to 10156 to restart
[nodemon] watching: src/**/*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node --inspect ./src/server.ts`
[nodemon] spawning
[nodemon] child pid: 13344
[nodemon] watching 12 files

＆＃13;

＆＃13;

＆＃13;

Answer 8

.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
}

Answer 9

使用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;
    }

Answer 10

在 Bootstrap 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;
}