这是工具提示中没有阴影的箭头:
我正在尝试对其进行阴影处理,但是由于箭头是由边框制成的,因此我无法呈现适当的结果。得到以下内容:
有什么想法如何将箭头部分的阴影整合到工具提示的其余部分?(下面的代码段)
检查了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, 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>
答案 0 :(得分:2)
您可以使用一点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>