.tooltip { position: relative; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltiptext { font-family: roboto; font-weight: 400; font-size: var(--size-s); visibility: hidden; background-color: var(--dark-20l); text-align: center; border-radius: 0.5em; padding: 0.25em 0.5em; position: absolute; z-index: 1; top: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0s 1s; white-space: nowrap; }