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?
Check out Chris Coyier's article on adding shadows to triangles. It might help you get this to work.