[data-tooltip]
{
    position: relative;
}

/*[data-tooltip]::before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    anchor-name: --tooltip;
}*/

    [data-tooltip]::after
    {

        
    }
    [data-tooltip]::after
    {
        content: attr(data-tooltip);
        font-family: var(--font-family-normal);
        font-size: 0.7em;
        color: black;
        white-space: pre-line;
        padding: 5px 7px;
        position: absolute;
        top: 105%;
        left: 50%;
        transform: translate(-50%);
        max-width: max(300px, 90%);
        width: max-content;
        background-color: white;
        border: 2px solid black;
        border-radius: 10px;
        box-shadow: inset 0 0 2px black;
        opacity: 0;
        visibility: hidden;
        z-index: 99999;
        transition: all 300ms ease-in-out;
        /*position-anchor: --tooltip;
        position-area: bottom;
        position-try-fallbacks: top, right, left;*/
    }

    [data-tooltip]:hover::after
    {
        opacity: 1;
        visibility: visible;
    }

    [data-tooltip][data-tooltip-position="right"]::after
    {
        top: 50%;
        left: 105%;
        transform: translateY(-50%);
    }

    [data-tooltip][data-tooltip-position="left"]::after
    {
        top: 50%;
        left: unset;
        right: 105%;
        transform: translateY(-50%);
    }

    [data-tooltip][data-tooltip-position="top"]::after
    {
        top: unset;
        bottom: 105%;
    }