Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.
У нас появилась задача создать у элементов owl carousel всплывающие блоки tooltips.
Сразу столкнулись с тем, что всплывающий блок не отображается целиком, хотя в коде он присутствует и у него есть свойство position: absolute.
А всё потому, что у блока с элементами карусели скрыта часть содержимого, которая не поместилась в контейнере.
.owl-carousel .owl-stage-outer { overflow: hidden; }
В данном случае нам не подойдет замена на overflow: visible;, т.к. в таком случае будет отображаться не только наш блок tooltip, но и все скрытые элементы карусели. В данном случае напрашивается такое решение:
.owl-carousel .owl-stage-outer { overflow-y: visible; overflow-x: hidden; } Но, оно даёт совершенно неожиданный результат. Вместо отображения по вертикали всплывающего блока, мы получаем вертикальные полосы прокрутки.
А связано это с "замечательной" особенностью свойства overflow, если значение для отображения по горизонтали overflow-x: hidden, а по вертикали - overflow-y: visible, то значение по вертикали работает как overflow-y: auto, а оно автоматически определяет, нужно ли добавлять полосы прокрутки scroll. Полосы появляются, когда содержимое выпадает из родительского контейнера.
В интернете в большинстве случаев данную проблему предлагают решить с помощью js. Но, на самом деле всё гораздо проще. Достаточно visible поменять на clip. И наш блок tooltip появился!
.owl-carousel .owl-stage-outer { overflow-y: visible; overflow-x: clip; } 