:root{--tt-bg:#333;--tt-fg:white;--tt-padding:0.3em;--tt-radius:0.2em;--tt-offset:4px;--tt-delay:0.1s;--tt-duration:0.15s}[data-tt]{position:relative;--_scale:0.5;--_width:max-content}[data-tt-pos=bottom],[data-tt]:not([data-tt-pos]){--_top:calc(100% + var(--tt-offset));--_left:50%;--_tx:-50%;--_origin:top}[data-tt-pos=top]{--_bottom:calc(100% + var(--tt-offset));--_left:50%;--_tx:-50%;--_origin:bottom}[data-tt-pos=left]{--_right:calc(100% + var(--tt-offset));--_top:50%;--_ty:-50%;--_origin:right}[data-tt-pos=right]{--_left:calc(100% + var(--tt-offset));--_top:50%;--_ty:-50%;--_origin:left}[data-tt-size=small]{--_width:80px}[data-tt-size=medium]{--_width:160px}[data-tt-size=large]{--_width:240px}[data-tt-size=max]{--_width:max-content}[data-tt]::after{content:attr(data-tt);background:var(--tt-bg);color:var(--tt-fg);width:var(--_width);padding:var(--tt-padding);border-radius:var(--tt-radius);pointer-events:none;z-index:10;position:absolute;top:var(--_top);bottom:var(--_bottom);left:var(--_left);right:var(--_right);opacity:0;transform:translate(var(--_tx, 0px),var(--_ty, 0px)) scale(var(--_scale, 1));transform-origin:var(--_origin);transition:transform,opacity;transition-delay:0s}[data-tt-open]::after,[data-tt]:hover::after{--_scale:1;opacity:1;transition-delay:var(--tt-delay);transition-duration:var(--tt-duration)}[data-tt]:focus-visible::after{--_scale:1;opacity:1;transition-delay:0s}