.black-tooltip{
    display: block;
    position: absolute;
    right: 0;
    width: 240px;
    background: #000000d9;
    bottom: calc(100% + 8px);
    padding: 4px;
    border-radius: 4px;
    color: #fffc;
    text-align: left;
}

.black-tooltip-container{
    position: relative;
    height: 0;
    width: 100%;
    transition: opacity 0.3s linear;
    opacity: 0;
    top:-4px;
}

.black-tooltip-container.show {
    opacity: 1;
}

.black-tooltip-container::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    clear: both;
    border-right: 8px solid #0000;
    border-left: 8px solid #0000;
    border-top: 8px solid #000000d9;
    bottom: 0;
    right: 6px;
}
.black-tooltip-container.black-tooltip-left .black-tooltip{
    right:auto;
    left:0;
}
.black-tooltip-container.black-tooltip-left::after{
    right:auto;
    left:6px;
}