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

[Anonymous]

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

• Action 1 Action 2

the styling for scroll-container is:

.scroll-container { width: 100%; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #dee2e6; } and syling for tooltip:

.tooltip { position: relative; display: inline-block; .button { margin: 0; } .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: #fff; text-align: center; text-transform: none; white-space: normal; font-weight: normal; visibility: hidden; opacity: 0; transition: all 0.25s ease-out; &:after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 5px solid transparent; border-bottom: 5px solid #445e5f; } &--wide { min-width: 240px; } } &:hover .tooltip__content { visibility: visible; opacity: 1; } } And this shows me the view like this:



the small triangle under the Action 1 is a tooltip. If I remove overflow-x:auto and overflow-y:hidden tooltip is working how I expect 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/780 ... le-element