.popup {
    max-width: 300px;
    position: absolute;
    background: white;
    padding: 8px 15px;
    border-radius: 4px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
    z-index: 10;

    top: 0;
    left: 0;
}

.arrow {
    position: absolute;
    background: white;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

[data-placement^=top] .arrow {
    bottom: -5px;
}
[data-placement^=bottom] .arrow {
    top: -5px;
}
[data-placement^=left] .arrow {
    right: -5px;
}
[data-placement^=right] .arrow {
    left: -5px;
}