<div class="self-popover">
<div class="self-arrow"></div>
</div>
.self-popover {
width: 320px;
height: 400px;
position: absolute;
right: -10px;
top: 45px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
border: 1px solid #ebeef5;
z-index: 20;
.self-arrow {
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 7px;
margin-right: 6px;
border-color: transparent;
border-style: solid;
border-width: 12px;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
border-top-width: 0;
border-bottom-color: #ebeef5;
&::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 12px;
content: " ";
top: 1px;
margin-left: -12px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
}
}