CSS - TOOLTIPS

    // TOOLTIP
    <span data-tooltip="This is a tooltip" class="tooltip">Hover me for more information</span>

    //CSS
    [data-tooltip]{
        position: relative;

    }

    [data-tooltip]::before,
    [data-tooltip]::after{
        --tooltip-color: #333;
        --arrow-size: .5rem;
        --scale: 0;

        position: absolute;
        left: 50%;
        transform: translate(-50%, var(--translate-y)) scale(var(--scale));

        transition: transform 500ms;
        transition-timing-function: linear;
        
    }


    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        --scale: 1;

        transition-timing-function: cubic-bezier(0.25, 0.1, 0.45, 1.93);
    }

    [data-tooltip]::before{
        --translate-y: calc(-100% - var(--arrow-size));
        content: attr(data-tooltip);
    
        /* top: -1rem; */
        /* left: 50%;
        transform: translate(-50%, calc(-100% - var(--arrow-size))); */
        background-color: var(--tooltip-color);
        color: white;
        padding: .5em;
        border-radius: .3em;
        width: max-content;
        max-width: 100%;
        text-align: center;

        transform-origin: bottom center;
    }

    [data-tooltip]::after{
        --translate-y: calc(-1 * var(--arrow-size));
        content:'';
        border: var(--arrow-size) solid transparent;
        border-top-color: var(--tooltip-color);


        transform-origin: top center;
    }