Добавление тени в стрелку всплывающей подсказки в твиттере

Мы используем загрузчик 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, в котором она находится?

Источник

3 ответа

Решение

Прочтите статью Криса Койера о добавлении теней в треугольники. Это может помочь вам заставить это работать.

Источник

Я смог сделать это, создав div внутри класса всплывающей подсказки начальной загрузки под названием triangle-with-shadow. я использовал 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>

Это хорошо работает с белым фоном. Это не идеально, но если вы хотите, чтобы тень на стрелке была подсказкой, это было лучшее решение с использованием начальной загрузки. В противном случае создайте подсказку с нуля.

Источник

После анализа Twitter Boostrap CSS для стрелки всплывающей подсказки становится очевидно, что они используют верхнюю границу с прозрачными левой и правой границами, чтобы получить форму "стрелки". Поскольку они являются границами, они не могут быть окружены тенями. Очень грустно.

Источник
Другие вопросы по тегам