1

我们正在使用 twitter 引导程序并添加自定义工具提示。我们想将阴影添加到工具提示中，并且我们已经设法将它们添加到主工具提示框中，但没有添加到工具提示下方的向下箭头中。这是使用此代码的当前示例：

    .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 获取主框，但 .tooltip.top .tooltip-arrow 将阴影放在箭头的整个框周围。

关于如何让阴影与箭头的对角线而不是它所在的 div 框对齐的任何建议？

4

3 回答 3

2

查看Chris Coyier关于向三角形添加阴影的文章。它可能会帮助您使其正常工作。

于 2013-08-29T20:47:42.813 回答
2

我可以通过在引导工具提示类中创建一个名为 triangle-with-shadow 的 div 来实现这一点。我使用bottom和leftcss 属性将自定义形状覆盖在现有引导工具提示箭头的顶部。

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

这适用于白色背景。它并不完美，但如果您想要工具提示箭头部分的阴影，这是使用引导程序的最佳解决方案。否则从头开始构建工具提示。

于 2015-10-29T00:40:18.343 回答
0

在分析了工具提示箭头的 twitter boostrap css 之后，很明显他们正在使用具有透明左右边框的边框顶部来获得“箭头”形状。由于它们是边界，因此它们不能被阴影包围。好难过。

于 2013-08-29T20:45:06.367 回答