:root {
    --ttbgcolor: #333333;
    --ttcolor: #ffffff;
}

[tooltip-lbl][tooltip-pos] {
    position: relative;
}

[tooltip-lbl][tooltip-pos]:before {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    opacity: 0;
    transition: .1s all;
    transition: all .18s ease-out .18s;
    border: 5px solid transparent;
    z-index: 10;
}

[tooltip-lbl][tooltip-pos]:after {
    content: attr(tooltip-lbl);
    position: absolute;
    padding: 10px;
    color: var(--ttcolor);
    opacity: 0;
    transition: .1s all;
    white-space: nowrap;
    transition: all .18s ease-out .18s;
    z-index: 10;
    pointer-events: none;
    border-radius: 4px;
    background-color: var(--ttbgcolor);
    font-size:14px;
}


[tooltip-lbl][tooltip-pos]:hover:before,
[tooltip-lbl][tooltip-pos]:hover:after {
    opacity: 1;
    pointer-events: none;
}

[tooltip-lbl][tooltip-pos][tooltip-pos=top]:hover:before, [tooltip-lbl][tooltip-pos][tooltip-pos=top]:hover:after, [tooltip-lbl][tooltip-pos][tooltip-pos=bottom]:hover:before, [tooltip-lbl][tooltip-pos][tooltip-pos=bottom]:hover:after {
    transform: translate(-50%, 0);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:before {
    bottom: 100%;
    transform-origin: top;
    transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:after {
    margin-bottom: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:before {
    border-top-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=top]:before, [tooltip-lbl][tooltip-pos][tooltip-pos=top]:after {
    left: 50%;
    transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=top]:before {
    border: 5px solid transparent;
    border-top-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=top]:after {
    margin-bottom: 10px;
}



/*--Bottom--*/
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:before {
    top: 100%;
    transform-origin: bottom;
    transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:after {
    margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:before {
    border-bottom-color: var(--ttbgcolor);
}


[tooltip-lbl][tooltip-pos][tooltip-pos=bottom]:before, [tooltip-lbl][tooltip-pos][tooltip-pos=bottom]:after {
    left: 50%;
    top: 100%;
    transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=bottom]:before {
    border: 5px solid transparent;
    border-bottom-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=bottom]:after {
    margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos=left]:before, [tooltip-lbl][tooltip-pos][tooltip-pos=left]:after {
    top: 50%;
    right: 100%;
    transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=left]:before {
    border: 5px solid transparent;
    border-left-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=left]:after {
    margin-right: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos=left]:hover:before, [tooltip-lbl][tooltip-pos][tooltip-pos=left]:hover:after {
    right: 100%;
    top: 50%;
    transform: translate(4px, -50%);
    transform-origin: bottom;
}

[tooltip-lbl][tooltip-pos][tooltip-pos=right]:before, [tooltip-lbl][tooltip-pos][tooltip-pos=right]:after {
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=right]:before {
    border: 5px solid transparent;
    border-right-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos=right]:after {
    margin-left: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos=right]:hover:before, [tooltip-lbl][tooltip-pos][tooltip-pos=right]:hover:after {
    left: 100%;
    top: 50%;
    transform: translate(4px, -50%);
    transform-origin: bottom;
}






/*-- Right --*/

[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:after {
    right: 0;
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:before {
    right: 5px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:hover:before {
    transform: translate(0, 0);
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:after {
    left: 0;
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:before {
    left: 5px;
}

[tooltip-lbl][tooltip-size=sm]:after {
    white-space: normal;
    width: 90px;
}

[tooltip-lbl][tooltip-size=md]:after {
    white-space: normal;
    width: 150px;
}

[tooltip-lbl][tooltip-size=lg]:after {
    white-space: normal;
    width: 260px;
}

[tooltip-lbl][tooltip-size=xlg]:after {
    white-space: normal;
    width: 380px;
}

[tooltip-lbl][tooltip-size=fit]:after {
    white-space: normal;
    width: 100%;
}