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=".9.1/jquery.min.js"></script>
<script src=".0.0/js/bootstrap.min.js"></script>

<link href=".2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href=".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>

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://netdna.bootstrapcdn./font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn./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>

• javascript
• html
• css
• twitter-bootstrap

Share Follow asked Jun 7, 2016 at 13:49 RayuduRayudu 1,81611 gold badge1515 silver badges3232 bronze badges 2

• What arrow are you talking about? – wot Commented Jun 7, 2016 at 13:57
• He means the triangle part that sticks into the button. You can't add a shadow on that unless you want to apply it to the entire little rectangle which is transparent except for the actual triangle. So you'll have a shadow around the box, not the triangle. – Rachel S Commented Jun 7, 2016 at 14:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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