:root{
    --bg-color: #2b2b33;
    --sh-color: #2b2b3388;
    --fg-color: #f1f2f3;
}

.vtip {
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.vtip:before {
    content: attr(data-tip);
    font-size: 12px;
    font-style: italic;
    position: absolute;
    background: var(--bg-color);
    color: var(--fg-color);
    line-height: 1.3em;
    padding: 5px;
    box-shadow: 0 1px 3px var(--sh-color);
    min-width: 100px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.vtip:after {
    width: 0;
    height: 0;
    border-style: solid;
    content: "";
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.vtip:hover:before,
.vtip:hover:after {
    visibility: visible;
    opacity: 1;
}

.vtip.top:before {
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 8px));
    border-radius: 3px;
}

.vtip.top:after {
    border-width: 8px 8px 0 8px;
    border-color: var(--bg-color) transparent transparent transparent;
    top: -8px;
    left: 50%;
    transform: translate(-50%, 0);
}

.vtip.bottom:before {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 8px));
    border-radius: 3px;
}

.vtip.bottom:after {
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent var(--bg-color) transparent;
    bottom: -8px;
    left: 50%;
    transform: translate(-50%, 0);
}

.vtip.left:before {
    left: 0;
    top: 50%;
    transform: translate(calc(-100% - 8px), -50%);
    border-radius: 3px;
}

.vtip.left:after {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent var(--bg-color);
    left: -8px;
    top: 50%;
    transform: translate(0, -50%);
}

.vtip.right:before {
    right: 0;
    top: 50%;
    transform: translate(calc(100% + 8px), -50%);
    border-radius: 3px;
}

.vtip.right:after {
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--bg-color) transparent transparent;
    right: -8px;
    top: 50%;
    transform: translate(0, -50%);
}

[data-tip-width="100"]:before{
    width:100px !important;
}
[data-tip-width="150"]:before{
    width:150px !important;
}
[data-tip-width="200"]:before{
    width:200px !important;
}
[data-tip-width="250"]:before{
    width:250px !important;
}
[data-tip-width="300"]:before{
    width:300px !important;
}
[data-tip-width="350"]:before{
    width:350px !important;
}
[data-tip-width="400"]:before{
    width:400px !important;
}
[data-tip-width="450"]:before{
    width:450px !important;
}
[data-tip-width="500"]:before{
    width:500px !important;
}