Bootstrap 4 工具提示箭头阴影样式

Question

这是没有阴影的工具提示箭头：

我正在尝试对其进行阴影处理，但由于箭头是由边框组成的，因此我无法呈现正确的结果。得到以下内容：

关于如何将箭头部分的阴影集成到工具提示的其余部分有什么想法吗？（下面的代码段）

检查了和其他一些但找不到影子特定场景。

谢谢。

$('[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>

Answer 1

您可以通过一些 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>

Bootstrap 4 工具提示箭头阴影样式

Bootstrap 4 tooltip arrow shadow styling

css

twitter-bootstrap-tooltip

bootstrap-4