.popover {
position: absolute;
color: #ffffff;
background-color: #0f172a;
border-radius: 6px;
line-height: 1.4;
min-width: max-content;
max-width: 280px;
text-align: center;
font-family: inherit;
font-size: 12px;
font-weight: 500;
padding: 6px 10px;
height: max-content;
z-index: 99999;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
letter-spacing: 0.01em;
pointer-events: none;
}
.popover::after {
content: '';
position: absolute;
border-style: solid;
}
.popover.top::after {
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0 5px;
border-color: #0f172a transparent transparent transparent;
}
.popover.bottom::after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #0f172a transparent;
}
.popover.right::after {
top: 50%;
left: -5px;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-color: transparent #0f172a transparent transparent;
}
.popover.left::after {
top: 50%;
right: -5px;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #0f172a;
}