前端之家

  1. 首页
  2. 问答

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

• 问答

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

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

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

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

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

检查了following和其他一些内容，但是找不到阴影特定的场景。

谢谢。

$('[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,1);
}

.bs-tooltip-right .arrow::before {
  border-right-color: white !important;
  box-shadow: 2px 2px 4px 0px rgba(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>

lonewolfhunt 回答：Bootstrap 4工具提示箭头阴影样式

您可以使用一点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,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,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-4csstwitter-bootstrap-tooltip
本文链接：https://www.f2er.com/3092877.html

大家都在问