/* (A) BUILD TOOLTIP USING BEFORE PSEUDO-CLASS */
[data-tooltip]::before {
    content: attr(data-tooltip);
}

/* (B) POSITION TOOLTIP */
[data-tooltip] {
    position: relative;
    display: inline-block;
}

[data-tooltip]::before {
    position: absolute;
    z-index: 999;
}

[data-tooltip].bottom::before {
    top: 100%;
    margin-top: 10px;
}

/* (C) SHOW TOOLTIP ONLY ON HOVER */
[data-tooltip]::before {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}

[data-tooltip]:hover::before {
    visibility: visible;
    opacity: 1;
    font-size: 10px;
}
[data-tooltip]::before {
    background: rgb(62, 62, 62);
    color: #fff;
    padding: 5px;
    width: max-content;
    text-align: center;
    word-wrap: normal;
}