Как я могу использовать всплывающую подсказку в прокручиваемом элементе? ⇐ CSS

[Anonymous]

I have an element that can be scrollable in the direction x which includes a tooltip:

.nav-item { width: 120px; } .scroll-container { width: 100%; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #dee2e6; color: black; } .scroll-container .nav-tabs { width: max-content; white-space: nowrap; display: flex; align-items: center; padding: 0; border: none; } .scroll-container .nav-item { list-style: none; } .scroll-container .nav-tabs .nav-item { margin-right: 10px; } .tooltip { position: relative; display: inline-block; } .tooltip .button { margin: 0; } .tooltip .tooltip__content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; min-width: 120px; z-index: 2; display: block; margin-top: 10px; padding: 4px 8px; background: #445e5f; border-radius: 4px; font-size: 12px; color: pink; text-align: center; text-transform: none; white-space: normal; font-weight: normal; visibility: hidden; opacity: 0; transition: all 0.25s ease-out; } .tooltip .tooltip__content:after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 5px solid transparent; border-bottom: 5px solid #445e5f; } .tooltip .tooltip__content--wide { min-width: 240px; } .tooltip:hover .tooltip__content { visibility: visible; opacity: 1; }

• Action 1 content Action 1 content Action 1 content

the small triangle under Action 1 is a tooltip. If I remove overflow-x:auto and overflow-y:hidden tooltip works how I expected but this time scrollable feature is gone. How can I use scrollable (overflow-x: auto; and overflow-y: hidden;) and tooltip together?


Источник: https://stackoverflow.com/questions/781 ... le-element