.help-icon { display: inline-block; width: 18px; height: 18px; color: var(--text); text-align: center; border-radius: 50%; font-size: 13px; line-height: 15px; cursor: pointer; margin-left: 5px; position: relative; font-weight: bold; border-color: var(--text); border-style: solid; border-width: 1px; } .help-icon .tooltip-text { visibility: hidden; width: 250px; background-color: var(--primary); color: #fff; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 100; bottom: 125%; left: 50%; margin-left: -125px; opacity: 0; transition: opacity 0.3s; font-weight: normal; font-size: 14px; line-height: 1.4; box-shadow: 0px 4px 10px rgba(0,0,0,0.2); } .help-icon .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--primary) transparent transparent transparent; } .help-icon:hover .tooltip-text, .help-icon:focus .tooltip-text { visibility: visible; opacity: 1; } @media (max-width: 480px) { .help-icon .tooltip-text { width: 160px; margin-left: -140px; } .help-icon .tooltip-text::after { top: auto; } }