How to change the bootstrap popover arrow border color without filling it?

Question

I want to change the border-color of popover arrow.When I apply the border color,the arrow itself is filling up with the color.

I want to give only the color to the border of the arrow as for the popover body.

<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts">pop
</a>

$(function () {
    $('#example').popover();
});

Demo

`I want to give only the color to the border of the arrow as in the popover body.` .. I think http://stackoverflow.com/a/35909593/4763793 is the correct answer — Rino Raj, Mar 10 '16 at 07:10

score 13 · Accepted Answer · edited Mar 10 '16 at 07:07

13

you change the.popover.right .arrow. So changing the .arrow:after will change the "fill" color for the arrow, as you see I set to gray.

.popover.right .arrow {
  border-right-color: aqua;
}

Fiddle

edited Mar 10 '16 at 07:07

Rino Raj

6,264
2
27
42

answered Mar 10 '16 at 06:55

Dejan.S

18,571
22
69
112

according to what OP has posted your answer is correct. Only the arrow is showing colour. +1 – Rino Raj Mar 10 '16 at 07:09

score 4 · Answer 2 · answered Mar 10 '16 at 06:58

4

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

updated fiddle

answered Mar 10 '16 at 06:58

tao

82,996
16
114
150

How to change the bootstrap popover arrow border color without filling it?

2 Answers2