.allergen-icon-wrap { position: relative; display: inline-flex; } .allergen-icon-wrap::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; transform-origin: bottom center; } .allergen-icon-wrap:hover::after, .allergen-icon-wrap:focus-within::after { opacity: 1; transform: translateX(-50%) translateY(-2px); }