How can we change the color of arrow in the popover of bootstrap?

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>

This code creates the popover with a arrow how can we change the color of this arrow.

enter image description here

look at this answer: http://stackoverflow.com/a/38279489/3554107. For styling each directional arrows, we have to select each arrow using CSS attribute selector and then style them individually. — vishnu, Jul 09 '16 at 07:42
Possible duplicate of [Styling the arrow on bootstrap tooltips](http://stackoverflow.com/questions/15383440/styling-the-arrow-on-bootstrap-tooltips) — vishnu, Jul 09 '16 at 07:42

score 43 · Accepted Answer · edited Nov 03 '21 at 18:47

43

Use this css changing border-right color of pseudo element:

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

#DEMO

edited Nov 03 '21 at 18:47

Alex Stephens

3,017
1
36
41

answered Jul 29 '14 at 12:51

Manwal

23,450
12
63
93

This apparently changed to border-top-color, but it works well! – Baron Apr 01 '19 at 16:22

score 5 · Answer 2 · answered Aug 19 '18 at 11:53

5

In Bootstrap 4,

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

answered Aug 19 '18 at 11:53

KimchiMan

4,836
6
35
41

Seems to work fine without the second identifier ".bs-popover-auto[x-placement^="top"] .arrow::after". Is there something I'm not aware off that this should be required? – tdahman1325 Mar 04 '21 at 14:16

score 4 · Answer 3 · answered Jul 29 '14 at 11:51

Using a standard popover in Bootstrap 3, as in:

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

You can add the following css to your custom rules:

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

score 4 · Answer 4 · answered Jan 10 '16 at 21:34

I found out that you need to override one class for each of the possible positions of the popover. In this example, my "tour" popover has a dark background and white text:

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

score 2 · Answer 5 · answered May 19 '17 at 17:27

2

[Bootstrap Popover with arrow and background color]

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

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

answered May 19 '17 at 17:27

Popeye

253
4
13

score 1 · Answer 6 · answered Jul 29 '14 at 09:12

1

Not sure on this, but you can try changing

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

to

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

Hope this helps.

Regards, Alex

answered Jul 29 '14 at 09:12

Alex Szabo

3,274
2
18
30

score 1 · Answer 7 · answered Apr 26 '20 at 15:19

With using bootstrap 4 popover template

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

score 1 · Answer 8 · answered Aug 10 '22 at 07:33

In Bootstrap 5:

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

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

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

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

score 0 · Answer 9 · answered Mar 01 '18 at 04:51

If your using Angular2/4/5, with NGX-Bootstrap I manage to change it with CSS, click on normal text to popover on top. The others do not work because container="body" is not used. in angular they create [_nghost-c0] if you use container="body".

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

score 0 · Answer 10 · answered Mar 26 '19 at 09:28

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

Rick Mohr · Answer 11 · 2021-07-23T16:34:21.280

0

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

edited Jul 23 '21 at 16:34

answered Jul 23 '21 at 15:38

Rick Mohr

1,821
1
19
22

How can we change the color of arrow in the popover of bootstrap?

11 Answers11