Adding dropshadow to the twitter boostrap tooltip's arrow

Question

We are using twitter bootstrap and adding customized tooltips. We want to add dropshadows to the tooltip and we have managed to add them to the main tooltip box but not to the down arrow under the tooltip. Here's the current sample using this code:

    .tooltip-inner, .tooltip.top .tooltip-arrow {
    background-color: rgb(20,20,20,); /* Needed for IEs */
    -moz-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.4);
    zoom: 1;
    }

http://test-cms.infousa.com/education-center-jh/

.tooltip-inner gets the main box but .tooltip.top .tooltip-arrow puts the shadow around the whole box of the arrow.

Any suggestions on how to get the dropshadow to line up with the diagonal sides of the arrow rather than the box of the div it is in?

Answer 1

Check out Chris Coyier's article on adding shadows to triangles. It might help you get this to work.

Answer 2

After analyzing the twitter boostrap css for the tooltip arrow it's apparent that they are using border top with transparent left and right borders in order to get the "arrow" shape. Since they are borders, they can't be surrounded by drop shadows. So sad.

Answer 3

I was able to accomplish this by creating a div inside the bootstrap tooltip class called triangle-with-shadow. I used bottom and left css attributes to overlay the custom shape on top of the existing bootstrap tooltip arrow.

/* tool tip box-shadow styles */

<style>
  .tooltip-inner {
        background:#fff;
        color: #444;
        -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
  }
 .triangle-with-shadow:after {
         background: #fff;
         content: "";
         position: absolute;
         width: 0;
         height: 0;
         margin-left: -0.4em;
         bottom: -1.48em;
         left: 44%;
         box-sizing: border-box;
         border: 1em solid #ffffff;
         transform-origin: 0 0;
         transform: rotate(-45deg);
         box-shadow: -3px 3px 3px 0px rgba(0, 0, 0, 0.4);
   }
</style>

<!-- tooltip.html -->

<div class="custom-tooltip">
  <div class="top-title">
    <strong>Title</strong>
  </div>
  <div class="date-section">
    The Date
  </div>
  <div class="info">
    text
  </div>
  <div class="triangle-with-shadow"></div>
</div> 

This works well with a white background. It's not perfect but if you want the shadow on the arrow part of the tool-tip this was the best solution using bootstrap. Otherwise build the tooltip from scratch.