Search code examples
jquerycsstwitter-bootstraptwitter-bootstrap-3bootstrap-popover

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

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

Solution

  • 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