Стиль тени стрелки всплывающей подсказки Bootstrap 4

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

введите здесь описание изображения

Я пытаюсь затенить его, но поскольку стрелка состоит из границ, я не смог отобразить правильный результат. Получение следующего:

введите здесь описание изображения

Есть идеи, как интегрировать тень стрелки с остальной частью всплывающей подсказки? (фрагмент ниже)

Проверил следующие и некоторые другие, но не смог найти конкретный теневой сценарий.

Спасибо.

$('[data-toggle="tooltip"]').tooltip('show');
html body {
  background: #eee;
}

button.btn {
  margin-top: 100px;
}

.tooltip-inner {
  background-color: white !important;
  color: gray !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-right .arrow::before {
  border-right-color: white !important;
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Something">
  Some tooltip
</button>


css bootstrap-4 twitter-bootstrap-tooltip
person Syden    schedule 15.11.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете добиться этого с помощью небольшой магии css и применения стилей к псевдоэлементу ::after. Добавил туда тень и понизил z-index до -1, чтобы сидеть позади и давать желаемый эффект.

$('[data-toggle="tooltip"]').tooltip('show');
html body {
  background: #eee;
}

button.btn {
  margin-top: 100px;
}

.tooltip-inner {
  background-color: white !important;
  color: gray !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-right .arrow::before {
  border-right-color: white !important;
}

.bs-tooltip-right .arrow::after {
  content: "";
  position: absolute;
  left: 100%;
  z-index: -1;
  border: 5px solid #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Something">
  Some tooltip
</button>

person bhmahler    schedule 15.11.2019
comment
bhmahlet, не могли бы вы предоставить мне примеры размещения сверху, слева и снизу? Я пытался настроить ваш правильный пример размещения для других, но не повезло. Вот обновленная скрипта jsfiddle.net/Syden/6h9p5nju/1 на случай, если вы захотите помочь . Если вы это сделаете, я обновлю вопрос, чтобы включить все места размещения. Спасибо. - person Syden; 18.11.2019
comment
jsfiddle.net/g0v6547n Эта скрипта иллюстрирует изменение всех 4 типов. Я фактически изменил файл scss для всплывающей подсказки в исходном коде начальной загрузки, чтобы сгенерировать это. Дайте мне знать, если вам нужен источник scss - person bhmahler; 19.11.2019