.popover {
position: absolute;
color: white;
background-color: black;
border-radius: 4px;
line-height: 16px;
min-width: max-content;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px 12px;
height: max-content;
z-index: 99999;
}
.popover::after {
content: '';
position: absolute;
border-style: solid;
}
.popover.top::after {
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px 6px 0 6px;
border-color: black transparent transparent transparent;
}
.popover.bottom::after {
bottom: 100%;
left: 50%;
margin-left: -6px;
border-width: 0 6px 6px 6px;
border-color: transparent transparent black transparent;
}
.popover.right::after {
top: 50%;
left: -6px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-color: transparent black transparent transparent;
}
.popover.left::after {
top: 50%;
right: -6px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent black;
}