*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
}


#tooltip {
    display: none;
}

#tooltip[data-show] {
    display: block;
}

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

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

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

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