Question

我们正在使用twitter bootstrap并添加自定义工具提示。我们想在工具提示中添加阴影，我们已设法将它们添加到主工具提示框，但不是工具提示下的向下箭头。以下是使用此代码的当前示例：

    .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的框的任何建议？

Answer 1

在向三角形添加阴影时查看Chris Coyier's article。它可能会帮助您实现这一目标。

Answer 2

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

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

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

Answer 3

在分析了工具提示箭头的twitter boostrap css之后，显然他们使用带有透明左右边框的边框顶部以获得“箭头”形状。由于它们是边框，因此不能被阴影包围。太伤心了。

将drop shadow添加到twitter bootstrap工具提示的箭头中

3 个答案: