:root{
    --tooltip-bg : var(--bg-level-2);
    --tooltip-text : var(--text-color);
}


.tooltip{
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1101;
    padding: 10px !important;
    border-radius: var(--radius);
    background: var(--tooltip-bg) !important;
    color: var(--tooltip-text);
    max-width: min(500px, 50vw);
}
.tooltip[data-active="true"], .tooltip:hover{
    opacity: 1;
}

.tooltip:before{
    content: 'Note : ';
    font-weight: bold;
}

.tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 0 10px 20px 10px;
    border-color: transparent transparent var(--tooltip-bg) transparent;
}

.tooltip-top::after {
    bottom: -2px;
}

.tooltip-bottom::after {
    top: -2px;
}

.tooltip-left::after {
    right: -6px;
}
.tooltip-right::after {
    left: -6px;
}

.tooltip-top.tooltip-left::after {
    transform: rotate(20deg);
}
.tooltip-bottom.tooltip-left::after {
    transform: rotate(160deg);
}
.tooltip-top.tooltip-right::after {
    transform: rotate(-20deg);
}
.tooltip-bottom.tooltip-right::after {
    transform: rotate(-160deg);
}