#arrow,
#arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#arrow {
    visibility: hidden;
}

    #arrow::before {
        visibility: visible;
        content: '';
        transform: rotate(45deg);
    }


#tooltip {
    /*position: absolute;*/
    background: #fff692; /*#FFC107;*/
    color: black;
    border-radius: 3px;
    box-shadow: 6px 6px 6px rgba(0,0,0,0.5);
    padding: 8px;
    text-align: center;
    z-index: 999999999999;
}


    #tooltip[data-popper-placement^='top'] > #arrow {
        bottom: -5px;
    }

    #tooltip[data-popper-placement^='bottom'] > #arrow {
        top: -5px;
    }

    #tooltip[data-popper-placement^='left'] > #arrow {
        right: -0px;
    }

    #tooltip[data-popper-placement^='right'] > #arrow {
        left: -10px;
    }