Tooltip cut offs when scrolling enabled

[vasyl-shumskyi]

Hello,

I have 2 stacked elements modal-header and modal-body wrapped in modal-content.

Tooltip cut offs on modal-header when scrolling enabled for modal-body via overflow-y: auto.

If overflow-y: auto gets removed its working as expected. But modal-body contains lots of data so it needs scrolling.

Style looks like the following:

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
}

.modal-header {
    padding: 2px 16px;
    background-color: rgb(217,77,68);
    color: white;
    min-height: 24px;
    opacity: 0.9;
    text-align: center;
}

.modal-body { 
    padding: 15px; 
    text-align: center !important;
    /* height: 224px; */
    min-height: 224px;

    /* scrolling */
    overflow-y: auto;
    position: relative;
    max-height: 82vh;
}

Kindly assist.

[kazzkiq]

Its not possible to show elements outside of a parent element with overflow: scroll|hidden. They simply get cropped. Its how W3C specified it.

[vasyl-shumskyi]

Got it. Thanks! :)