gmx.css/src/_tooltip.css

A micro Material Design 3 based CSS-only framework.

[class*=tooltipped] {
    position: relative;
}

[class*=tooltipped]:hover::after {
    visibility: visible;
    opacity: 1;
}

[class*=tooltipped]:focus {
    user-select: none;
}

[class*=tooltipped]::after {
    --space: .35rem;
    content: attr(aria-label);
    background-color: var(--m3-scheme-inverse-surface);
    color: var(--m3-scheme-inverse-on-surface);
    text-align: left;
    position: absolute;
    visibility: hidden;
    padding: .4rem .6rem;
    border-radius: var(--m3-util-rounding-extra-small);
    font-size: .75rem;
    white-space: nowrap;
    opacity: 0;
    transition: .2s;
    z-index: 1000;
    pointer-events: none;
}

[class*=tooltipped].rich::after {
    white-space: normal;
    width: 14rem;
    padding: 1rem .85rem;
    font-size: .875rem;
    border-radius: var(--m3-util-rounding-small);
    box-shadow: var(--m3-util-elevation-3);
}

.tooltipped::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.7);
    margin-bottom: var(--space);
}

.tooltipped-bottom::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.7);
    margin-top: var(--space);
}

.tooltipped-left::after {
    top: 50%;
    right: 100%;
    transform: translateY(-50%) scale(0.8);
    margin-right: var(--space);
}

.tooltipped-right::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%) scale(0.8);
    margin-left: var(--space);
}

.tooltipped:hover::after,
.tooltipped-bottom:hover:after,
.tooltipped:focus::after,
.tooltipped-bottom:focus:after {
    transform: translateX(-50%) scale(1);
}

.tooltipped-left:hover::after,
.tooltipped-right:hover:after,
.tooltipped-left:focus::after,
.tooltipped-right:focus:after {
    transform: translateY(-50%) scale(1);
}