.tip{position:relative}.tip:after{content:attr(data-tip);background:var(--ink);color:var(--on-ink);white-space:nowrap;opacity:0;pointer-events:none;transition:all .25s var(--ease);z-index:5;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translate(-50%)translateY(4px)}.tip:hover:after,.tip:focus-within:after{opacity:1;transform:translate(-50%)}[dir=rtl] .tip:after{transform:translate(50%)translateY(4px)}[dir=rtl] .tip:hover:after,[dir=rtl] .tip:focus-within:after{transform:translate(50%)}