[tooltip] {
	position: relative;
}

[tooltip]:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}

[tooltip]:before {
    content: attr(tooltip);
    width: 100%;
    padding: 10px;
    line-height: 1.15;
    font-size: 12px;
    text-align: justify;
    color: white;
    border-radius: 4px;
    background: black;
}

[tooltip]:after,
[tooltip]:before {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    pointer-events: none;
}

[tooltip]:hover:after,
[tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
}

[tooltip-size="small"]:before {
    width: 88px;
}

[tooltip-size="medium"]:before {
    width: 168px;
}

[tooltip-size="large"]:before {
    width: 248px;
}

[tooltip-pos^="top"]:after {
    border-width: 6px 6px 0 6px;
    border-color: black transparent transparent transparent;
}

[tooltip-pos^="bottom"]:after {
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent black transparent;
}

[tooltip-pos^="left"]:after {
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent black;
}

[tooltip-pos^="right"]:after {
    border-width: 6px 6px 6px 0;
    border-color: transparent black transparent transparent;
}

[tooltip-pos^="top"]:before {
    bottom: calc(100% + 3px);
}

[tooltip-pos^="top"]:after {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}

[tooltip-pos^="right"]:before {
    left: calc(100% + 6px);
}

[tooltip-pos^="right"]:after {
    left: calc(100% + 3px);
}

[tooltip-pos^="bottom"]:before {
    top: calc(100% + 3px);
}

[tooltip-pos^="bottom"]:after {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}

[tooltip-pos^="left"]:before {
    right: calc(100% + 6px);
}

[tooltip-pos^="left"]:after {
    right: calc(100% + 3px);
}

[tooltip-pos$="left"]:before {
    left: calc(50% - 10px);
}

[tooltip-pos$="center"]:before {
    left: 50%;
    transform: translate(-50%, 0);
}

[tooltip-pos$="right"]:before {
    left: calc(50% + 10px);
    transform: translate(-100%, 0);
}

[tooltip-pos$="top"]:before {
    top: 0px;
}

[tooltip-pos$="top"]:after {
    top: 6px;
}

[tooltip-pos$="middle"]:before,
[tooltip-pos$="middle"]:after {
    top: 50%;
    transform: translate(0, -50%);
}

[tooltip-pos$="bottom"]:before {
    bottom: 0px;
}

[tooltip-pos$="bottom"]:after {
    bottom: 6px;
}