Popover Box shadow needs to be for arrow also

Question

Bootstrap by default have popover box shadow. but I need the same shadow with popover arrow. How can get that shadow for only for arrow border.

This is My-fiddle

Can any one help on this.

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

a{
  margin-top:100px;
}
.popover-content{
  min-height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


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

Answer 1

To make a triangular box-shadow you might just rotate a square by 45 degrees and apply the shadow:

.popover.right .arrow:before {
  content: "";
  display:block;
  position:absolute;
  z-index:-1;
  height:14.14px;
  width:14.14px;
  bottom:-8px;
  left:4px;
  background:transparent;
  transform: rotate(45deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

I also had to add the background to the content element since the shadow was on top of it. You can also work with overflow:hidden if you can't just add any background (or background color) to content.

.popover-content{
  background-color:#FFF;
}

Fiddle: https://jsfiddle.net/ke35nzag/